如何在同一行上获得两个h4标签？

Question

我想<h4>在bootstrap中将2个标签放在同一行但是我无法让它工作.

我想让一个<h4>与左侧对齐,一个与右侧对齐.

我试过漂浮左右浮动,但无济于事.

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

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}
.coolContainer {
    border: 3px solid #bbb;
}

Answer 1

.coolContainer h1:first-of-type {
    float: left;
}

.coolContainer h1:last-of-type {
    float: right;
}

这有效.只需将第一个左侧浮动,第二个浮动右侧. http://jsfiddle.net/x8eszw59/

编辑

呃,我想你必须把它改成"h4"而不是"h1",但你明白了.我刚刚关闭了代码中的"h1".

也

看起来你错过了你的行内部的div div.例如:

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

如果你只想使用Bootstrap,只需要制作2列6,并将一个标题标记放在一个中,另一个放在第二个中.

http://getbootstrap.com/

Answer 2

最简单的方法是将它们从blocks 转换为inlines:

h1 {display:inline;}

但是,如果它们溢出到下一行,则可能会中断.为了确保它们保持不变,你可以使它们成为css table-cell:

h1 {display:table-cell;}