Bootstrap 3: текст слева и справа в заголовке страницы

Question

Я пытаюсь сделать простой заголовок страницы с начальной загрузкой 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, то есть текст выровнен, но отображается снаружи (под) на страницу-заголовок, который остается пустым.

Любые подсказки?

Answer 1

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

Answer 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 и т.д., изменить его на «дисплей: блок», и вы должны будете добавить «ширину» атрибут в любом случае

Answer 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/