twitter-bootstrap Bootstrap 3.0 内联标题标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18684526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0 inline headings tags
提问by douweegbertje
I have the following piece of code:
我有以下一段代码：
<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 goal is to have both the <h2>and the <h4>next to each other, on the same base line. At this point the <h4>element is way above the line.
目标是让<h2>和<h4>相邻，在同一基线上。此时<h4>元素位于线上方。
I've tried to put 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:
我试图把它放到spans和其他“技巧”中，比如vertical-align: bottom. 出于某种原因，我只是无法在同一行上获得它，并且像这样相同的“行高”：
Heading Second Heading
标题第二标题
回答by John Magnolia
Surprised its not been mentioned but another way would be to use the heading classes.
很惊讶它没有被提及，但另一种方法是使用标题类。
<span class="h2 pull-left">heading</span>
<span class="h4">second heading</span>
See the less file where they typography stylesare applied, everything you need apart from the display:block
查看应用排版样式的 less 文件，除了 display:block 之外你需要的一切
回答by Sean Ryan
I was going to just work off the first answer, but here is a more complete answer:
我打算解决第一个答案，但这里有一个更完整的答案：
The HTML:
HTML：
<div class="row">
<div class="col-md-12">
<div class="well inline-headers">
<h2>heading</h2>
<h4>second heading</h4>
</div>
</div>
</div>
The CSS:
CSS：
.inline-headers h2, .inline-headers h4 {
display: inline-block;
vertical-align: baseline;
}
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.
这里正在发生两件事。首先，我们在标题上删除了一些不必要的浮动，以及完全不必要的 clearfix div。为了将来参考，您不需要将 clearfix 附加到单独的 div。
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.
其次，我建议创建一个新类，而不是像 MasterPoint 的示例所述那样覆盖井类的行为，以防您希望井正常设置 H2 和 H4 的样式。
回答by kichik
Bootstrap has built-in support for secondary headings with <small>.
Bootstrap 内置了对带有<small>.
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
回答by MasterPoint
Check the fiddle
检查小提琴
you have wrong float in your h2 and here is a rest of css which is needed.
您的 h2 中的浮点数错误，这是所需的其余 css。
.well h2, .well h4 {
display: inline-block;
vertical-align: baseline;
line-height: 100%;
}
Updated...
更新...
...this, will do the job.
...这个，会做的工作。
