html - Bootstrap 3.0 内联标题标签

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>

我们的目标是让 the<h2>和<h4>next 在同一基线上。在这一点上，该<h4>元素位于该线的上方。

我试图将其放入spans和其他“技巧”中，例如vertical-align: bottom. 出于某种原因，我只是无法在同一行上得到它，并且像这样的“行高”：

标题第二个标题

Answer 1

很惊讶它没有被提及，但另一种方法是使用标题类。

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

查看应用排版样式的 less 文件，除了 display:block 之外您需要的所有内容

Answer 2

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

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 的示例所述覆盖井类的行为，以防您希望井正常设置 H2 和 H4 的样式。

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%;
}

更新...

...这个，会做的工作。