twitter-bootstrap 如何在同一行上获得两个 h4 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26520438/
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
How to get two h4 tags on the same line?
提问by CodyBugstein
I'd like to get 2 <h4>tags to be on the same row in bootstrap however I can't get it to work.
我想让 2 个<h4>标签在引导程序中位于同一行，但是我无法让它工作。
I'd like to have one <h4>aligned with the left side, and one with the right side.
我想让一个<h4>与左侧对齐，一个与右侧对齐。
I've tried floating left and floating right but to no avail.
我试过向左浮动和向右浮动，但无济于事。
http://jsfiddle.net/v8ufbbdL/2/
http://jsfiddle.net/v8ufbbdL/2/
<div class="container">
<div class="row">
<div class="coolContainer">
<h1>Bootstrap jsFiddle Skeleton</h1>
<h1>Bootstrap jsFiddle Skeleton</h1>
</div>
</div>
</div>
css
css
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.coolContainer {
border: 3px solid #bbb;
}
回答by James
.coolContainer h1:first-of-type {
float: left;
}
.coolContainer h1:last-of-type {
float: right;
}
This works. Just floats the first one left and the second one right. http://jsfiddle.net/x8eszw59/
这有效。只需将第一个向左浮动，第二个向右浮动。 http://jsfiddle.net/x8eszw59/
EDIT
编辑
Er, I guess you'd have to change this to "h4" instead of "h1", but you get the idea. I was just going off the "h1"'s you have in your code.
呃，我想你必须把它改成“h4”而不是“h1”，但你明白了。我刚刚离开了你的代码中的“h1”。
ALSO
还
It seems like you are missing your column div's inside of your row. For example:
您似乎缺少行内的列 div。例如：
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
If you wanted to only use Bootstrap, just make 2 columns of 6, and put one header tag in one and the other in the second.
如果您只想使用 Bootstrap，只需制作 2 列 6，并将一个标题标签放在一个中，另一个放在第二个中。
回答by CodyBugstein
The easiest way is to convert them from blocks to inlines.:
最简单的方法是将它们从blocks转换为inlines：
h1 {display:inline;}
However, this might break if they overflow on to the next line. To make sure they stay put you can make them css table-cells:
但是，如果它们溢出到下一行，这可能会中断。为了确保它们保持原状，您可以将它们设为 css table-cell：
h1 {display:table-cell;}
回答by R.sandeep
.container {
margin-top: 10px;
}
#v {
float:left;
border: 6px solid #bbb;
}
#vk
{
float:right;
border: 6px solid #bbb;
}
</style>
<div class="container">
<div class="row">
<div id="v"><h1>Bootstrap jsFiddle Skeleton</h1></div>
<div id="vk"><h1>Bootstrap jsFiddle Skeleton</h1></div>
</div>
</div>
