Question

我使用的是Bootstrap 3.0，我的问题是：

可以阻止

<div class="under col-xs-12">fdf</div>

按照此处显示的方式放在代码中

<div class="row">
    <div class="col-xs-8">aaa</div>
    <div class="col-xs-4">bbb</div>
    <div class="under col-xs-12">fdf</div>
</div>

以便文字fdf位于aaa和bbb之下无论如何我认为它应该在下面，因为col-xs-8 + col-xs-4覆盖了整个宽度，但是我感到很困惑

div.under{
    border:1px solid black;
}

不仅包含一个块fdf，而且整个内容包括aaa和bbb。

你可以看看这里： jsFiddle

那么，从Bootstrap的角度来看，使黑色边框仅包裹第二行fdf的正确方法是什么？

Answer 1

aaa和bbb列已浮动，因此您需要将clear:both;添加到您的班级。

<强> jsFiddle example

Answer 2

这样做的Bootstrap方式

这是与one posted by j08691类似的答案，但你使用的是Bootstrap，所以我们将看一下Bootstrap的做法

Bootstrap为此提供了自己的内置类clearfix pupose（清除漂浮物）

请参阅：http://jsfiddle.net/DTcHh/4487/

<div class="row">
    <div class="col-xs-8">aaa</div>
    <div class="col-xs-4">bbb</div>
    <div class='clearfix'></div>
    <div class="under col-xs-12 ">fdf</div>
</div>

Answer 3

似乎＆＃34; Bootstrap方式＆＃34;是做一个嵌套的行。看看他们是如何在＃34; Nested Scaffolding＆＃34;：http://getbootstrap.com/2.3.2/scaffolding.html下完成的。

<div class="row">
    <div class="col-xs-8">aaa</div>
    <div class="col-xs-4">bbb</div>
    <div class = "row">
        <div class="under col-xs-12">fdf</div>
    </div>
</div>

Answer 4

那么创建另一行呢？

<div class="row">
    <div class="col-xs-8">aaa</div>
    <div class="col-xs-4">bbb</div>
</div>
<div class="row">
    <div class="under col-xs-12">fdf</div>
</div>

Bootstrap：col-xs-8 + col-xs-4下的定位div块不符合预期

4 个答案: