Question

我想在引导程序中将2 <h4>个标记放在同一行，但是我无法让它工作。

我想让一个<h4>与左侧对齐，一个与右侧对齐。

我尝试过左右漂浮但没有用。

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

修改

呃，我想你必须把它改成＆＃34; h4＆＃34;而不是＆＃34; h1＆＃34;，但你明白了。我刚刚离开你的代码中的＃34; h1＆＃34;

同时

您似乎错过了行内部的列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

最简单的方法是将它们从block转换为inline s。：

h1 {display:inline;}

但是，如果它们溢出到下一行，这可能会中断。为了确保它们保持不变，你可以使它们成为table-cell s：

h1 {display:table-cell;}

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>

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

3 个答案: