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>

这是一个尝试的小提琴：http://jsfiddle.net/DTcHh/2450/

基本上我只想在page-header内左右两边都有文字，但在同一行。

使用float:left和float:right的常规技巧与普通的html＆＃34;中断＆＃34; 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标签上调整行高

（自Bootstrap 4.1起）

使用float-left和float-right代替。您仍然需要clearfix。

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”属性

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个第4个。第二个div是第三个第三个，有4个网格偏移或间隙。

http://getbootstrap.com/css/

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

3 个答案: