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>

目标是在同一基线上拥有彼此<h2>和<h4>下一个.此时<h4>元素位于线上方.

我试图把它放到跨度和其他'技巧'之类的vertical-align: bottom.由于某种原因,我只是简单地无法在同一条线上得到这个,并且相同的'行高如下:

标题第二标题

Answer 1

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

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

查看应用排版样式的较少文件,除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