html - 如何在同一行上获取两个 h4 标签？

Question

我想要 2 <h4>标签在 Bootstrap 中位于同一行，但我无法让它工作。

我想要一个 <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 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/