Bootstrap 3: текст слева и справа в заголовке страницы
Я пытаюсь сделать простой заголовок страницы с помощью bootstrap 3. Вот код:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Здесь jsfiddle: http://jsfiddle.net/DTcHh/2450/
В принципе, я просто хочу иметь текст слева и справа внутри page-header, но в той же строке.
Обычные трюки использования float:left и float:right, как при нормальном html "break" page-header, что означает, что текст правильно выровнен, но отображается за пределами (внизу) заголовка страницы, который остается пустым.
Любые подсказки?
Ответы
Ответ 1
Вы можете использовать классы "pull-right" и "pull-left", а класс "clearfix" - после.
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Также вы можете отрегулировать высоту строки на теге h3 справа, если вы хотите соответствовать с h1
(по состоянию на Bootstrap 4.1)
используйте вместо этого float-left и float-right. Вам все еще нужен clearfix.
Ответ 2
если вы используете Bootstrap, вы должны сделать что-то вроде
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
если вы хотите "стилизовать" h1, h2 и т.д., измените его на "display: block", и вам все равно придется добавить атрибут "width"
Ответ 3
используйте следующую структуру для позиции с бутстрапом:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Подумайте о строке как сетке через 12. Так что кулак 4 оставил 3-й. Второй дивизион - третья треть с 4 сдвигом сетки или разрывом.
http://getbootstrap.com/css/
