html - Bootstrap 3 : text on the left and right in the page header

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”类。

( Bootstrap 3)

<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标签上调整行高

Bootstrap 3 的 fiddle :https://jsfiddle.net/darkosss/dy9wjk2q/

(从 Bootstrap 4.1 开始)

改用float-left 和float-right。您仍然需要 clearfix。

<div class="page-header">
  <div class="float-left">
  <h1>Text on the left</h1>
  </div>
  <div class="float-right">
  <h3 class="text-right">This to the right but on the same line</h3>
  </div>
  <div class="clearfix"></div>
</div>

Bootstrap 4 的 fiddle :https://jsfiddle.net/darkosss/eozs65qb/