如何让两个h4标签在同一行显示？

Question

我想让两个 <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;
}

- CodyBugstein

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，只需创建两列宽度为6，并在其中一列中放置一个标题标签，另一列中放置另一个标题标签。

http://getbootstrap.com/

- James

---

ALSO 后面的部分解决了我的问题。谢谢！ - CodyBugstein

@Imray 很高兴能帮到你。谢谢~ - James

Answer 2

最简单的方法是将它们从块级元素转换为行内元素。

h1 {display:inline;}

然而，如果它们溢出到下一行，这可能会出现问题。为了确保它们保持在原位，您可以将它们设置为CSS的table-cell：

h1 {display:table-cell;}

- user764357

Answer 3

.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>

- R.sandeep