Bootstrap 3：页眉左右两边的文字答案

【问题标题】：Bootstrap 3: text on the left and right in the page headerBootstrap 3：页眉左右两边的文字
【发布时间】：2015-02-04 05:40:26
【问题描述】：

我正在尝试使用 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 的常用技巧，这意味着文本正确对齐但显示在页眉之外（下方），页眉仍然为空。

有什么线索吗？

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用“pull-right”和“pull-left”类，之后使用“clearfix”类。

（引导程序 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 的小提琴：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 的小提琴：https://jsfiddle.net/darkosss/eozs65qb/

【讨论】：

所有答案都有效，之所以选择这个，是因为它最简单（根本不利用网格系统），并且当水平空间不足时，线条正确地排在另一排之下。谢谢！
知道为什么当我逐字复制粘贴到 Angular 组件的 .css 中时，控制行高的 jsfiddle 中的 css 不起作用吗？
@AdamHughes 对迟到的回复感到抱歉，首先 - 我只是注意到小提琴无法正常工作，因为它是在 bootstrap 4 尚未推出时创建的，所以我将外部资源更新为 V3（类pull-left 和 pull-right 在 V4 中不起作用），你能检查一下你正在使用哪个版本的引导程序，接下来的事情是你的 line-height 属性可能会在你的 CSS 代码中的某个地方被覆盖，所以你可以添加！属性之后的重要 - 这不是很好的解决方案，或者您可以更具体地定位元素。另外，如果您可以提供一些代码示例，它可能会有所帮助。

【解决方案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”属性

【讨论】：

不确定这是否可行，但这似乎是一种更直观的方法（因为 OP 的问题是网格的典型用例？）@Master_T

【解决方案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。第 2 个 div 是具有 4 个网格偏移或间隙的第 3 个三分之一。

http://getbootstrap.com/css/

【讨论】：

类应该是col-md-4 而不是md-col-4