Html Bootstrap 3：页眉左右文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27326278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: text on the left and right in the page header
提问by Master_T
I'm trying to make a simple page header with bootstrap 3. Here's the code:
我正在尝试使用引导程序 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>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
这是一个 jsfiddle 尝试：http: //jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
基本上，我只是想对左，右中的文本page-header，但在同一行。
The usual tricks of using float:leftand float:rightas with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
与普通 html一样使用float:left和的常用技巧float:right“打破” page-header，这意味着文本正确对齐但显示在页面标题之外（下方），页面标题保持为空。
Any clues?
有什么线索吗？
回答by Darko
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
您可以使用“右拉”和“左拉”类，然后使用“clearfix”类。
(Bootstrap 3)
（引导程序 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>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
如果您想与 h1 匹配，您也可以在右侧的 h3 标签上调整行高
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
Bootstrap 3 的小提琴：https: //jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
（从 Bootstrap 4.1 开始）
use float-leftand float-rightinstead. You still need the clearfix.
使用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>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
Bootstrap 4 的小提琴：https: //jsfiddle.net/darkosss/eozs65qb/
回答by Alex Angelico
if you are using Bootstrap, you should do something like
如果您使用的是 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>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
如果您想“风格化”h1、h2 等，请将其更改为“display:block”，并且无论如何您都必须添加“width”属性
回答by Creaven
use the following structure to position with bootstrap:
使用以下结构通过 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>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
把这一行想象成一个横跨 12 的网格。所以第 4 拳左手第 3。第二个 div 是第三个三分之一，有 4 个网格偏移或间隙。
