Question

我有以下代码：

<div class="row">
    <div class="col-md-12">
        <div class="well">
            <div class="clearfix">
                <h2 class="pull-left">Heading</h2>
                <h4>Second Heading</h4>
           </div>
        </div>
     </div>
</div>

目标是让<h2>和<h4>彼此相邻，在同一基线上。此时，<h4>元素位于该行之上。

我试图把它放到 spans 和其他'技巧'中，如vertical-align: bottom。出于某种原因，我只是无法在同一条线上得到这个，并且像这样的'行高：

标题第二标题

Answer 1

我打算完成第一个答案，但这里有一个更完整的答案：

http://bootply.com/79703

HTML：

<div class="row">
  <div class="col-md-12">
    <div class="well inline-headers">
      <h2>heading</h2>
      <h4>second heading</h4>
    </div>
  </div>
</div>

CSS：

.inline-headers h2, .inline-headers h4 {
  display: inline-block;
  vertical-align: baseline;
}

这里发生了两件事。首先，我们在标题上删除了一些不必要的浮点数，以及完全不必要的clearfix div。为了将来参考，您不需要将clearfix附加到单独的div。

其次，我建议创建一个新类，而不是像MasterPoint的示例状态那样覆盖井类的行为，以防您希望井正常设置H2s和H4的样式。

Answer 2

感到惊讶的是没有提到它，但另一种方法是使用标题类。

<span class="h2 pull-left">heading</span>
<span class="h4">second heading</span>

查看应用typography styles的较少文件，除显示之外您需要的所有内容：块

Answer 3

Bootstrap内置了对<small>的辅助标题的支持。

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

http://getbootstrap.com/css/#type-headings

Answer 4

检查小提琴

http://jsfiddle.net/VccZ6/2/

你的h2中有错误的浮动，这是需要的其余css。

.well h2, .well h4 {
    display: inline-block;
    vertical-align: baseline;
    line-height: 100%;
}

...更新

......这将完成这项工作。

Bootstrap 3.0内联标题标签

4 个答案: