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 "перерыв"page-header, т. е. текст выровнен, но выводится за пределы (под) заголовок страницы, который остается пустым.

какие-то зацепки?

12
html twitter-bootstrap twitter-bootstrap-3

3 ответов

вы можете использовать классы "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

29

Если вы используете 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"

7

используйте следующую структуру для позиционирования с bootstrap:

<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-й. 2nd div - это 3rd third со смещением сетки 4 или зазором.

http://getbootstrap.com/css/

1