Bootstrap 3:页眉中左右两侧的文本

Question

我正在尝试使用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,意味着文本正确对齐,但显示在页面标题的外部(下方),它仍然是空的.

有线索吗？

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

如果要与h1匹配,也可以在右侧的h3标签上调整行高

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等,将其更改为"display:block",你必须添加一个"width"属性