处理多个堆井的Bootstrap方式

Question

我刚开始使用twitter bootstrap，到目前为止我的体验非常好。

我目前在按照我希望的方式定位一些.well元素时遇到了一些麻烦。基本上，这是我想看到它们

但这就是我得到的

第二行显然与第一行重叠，因为元素是浮动的，行没有包裹在.well元素周围。我试图申请.clearfix课，但遗憾的是它没有解决这个问题。

这是我正在使用的html

<div class="container">
    <div class="row offset-top-large">
        <div class="col-md-9">
            <a href="#" class="well well-lg">

            </a>
        </div>
    </div>

    <div class="row offset-top">
        <div class="col-md-9">
            <a href="#" class="well well-lg">

            </a>
        </div>
    </div>
</div>

.offset-top类只是为行添加了额外的边距

.offset-top-large{
    margin-top:100px;
}

.offset-top{
    margin-top:20px;
}

我知道我可以通过操纵css来解决这个问题，例如，删除浮动，但我的问题是 - 我可以这样做（获得所需的输出）添加任何额外的CSS并可能破坏引导功能（调整大小到较小的屏幕等）。

修改

抱歉，我发布了错误的大小类的代码 - 我现在已经纠正了这里，这是一个显示我的问题的小提琴 - http://www.bootply.com/127620

谢谢！

Answer 1

根据你提供的html和css，这与浮动无关。问题是您的行中只有链接元素，默认情况下是内联元素。内联元素不占用其容器元素中的任何空间。尝试添加display：block或display：inline-block到well元素。

Answer 2

您问题的更新不会发生太大变化，您只需增加保证金即可考虑更大的井尺寸。

试试这个：

.offset-top-large{
    margin-top:100px;
}

.offset-top{
    margin-top:50px;
}

注意：bantroth也是正确的，将display:block添加到a代码是另一种解决方案。