bootstrap 3.0内联标题标签 [英] bootstrap 3.0 inline headings tags

问题描述

我有以下代码：

  <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是在线以上。

The goal is to have both the H2 and the H4 next to each other, on the same base line. At this point the H4 is way above the line.

我试图把这个放到跨度，和其他'技巧'像vertical-align底部。
由于某种原因，我根本不能在同一行上得到这个，并且像这样的相同的行高：

Ive tried to putt this into spans, and other 'tricks' like vertical-align bottom. For some reason I just simply cannot get this on the same line, and same 'line-height like this:

标题第二个标题

heading Second Heading

推荐答案

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

I was going to just work off the first answer, but here is a more complete answer:

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。为了将来参考，您不需要为单独的div添加修复。

Two things are happening here. First, we dropped some unnecessary floats on the headings, as well as the completely unnecessary clearfix div. For future reference, you do not need to attach a clearfix to a separate div.

其次，我建议创建一个新类，而不是重写井的行为类作为MasterPoint的示例状态，以便您希望井正常地设置H2s和H4。

Second, I would suggest creating a new class, instead of overriding the behavior of the well class as MasterPoint's example states, in case you ever want the well to style H2s and H4s normally.

这篇关于bootstrap 3.0内联标题标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！