Место кнопки внутри страницы заголовка

Supose Я имел этот код IM один из моих взглядов моего весеннего проекта:Место кнопки внутри страницы заголовка

<div class="page-header"> 
    <h1>Example page header <small>Subtext for header</small></h1> 
</div>

(без подтекста). Как я могу поместить группу кнопок, как это одна:

<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button> 
</div>

внутри page-header, выровнены по правому краю?

источник

2017-02-22 Kleber Mota

Ну сделать их плавать вправо с помощью pull-right класс Bootstrap в:

.header-btn-group{ 
 
    top: 2px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<div class="page-header"> 
 
    <div class="btn-group pull-right header-btn-group" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default">Left</button> 
 
    <button type="button" class="btn btn-default">Middle</button> 
 
    <button type="button" class="btn btn-default">Right</button> 
 
    </div> 
 
    <h1>Example page header <small>Subtext for header</small></h1> 
 
</div>

источник

2017-02-22 14:56:36 AVAVT

с этим решением кнопки не будут приведены в соответствие с текстом (они будут размещены на линии, которая находится ниже текста). Есть ли способ исправить это и заставить кнопки оставаться в одном месте с текстом (но в другом углу)? –

К сожалению, вам придется точно настроить позицию вручную. – AVAVT

Я предполагаю, что это должно быть сделано с помощью css. Можете ли вы рассказать мне, какой код css я могу использовать для этого встроенного? Я имею в виду, могу ли я сделать это с помощью одной и короткой инструкции css? –

Место кнопки внутри страницы заголовка

ответ

Смежные вопросы