html - 处理多个堆叠井的 Bootstrap 方法

Question

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

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

但这就是我得到的

第二行显然与第一行重叠，因为元素是 float 的并且该行没有环绕 .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 自行修复此问题，例如，删除 float ，但是我的问题是 - 我是否可以不这样做(获得所需的输出)添加任何额外的 CSS 并可能破坏 Bootstrap 功能(调整到较小的屏幕等)。

编辑

抱歉，我发布了错误井尺寸等级的代码 - 我现在已经更正了它，这是一个显示我的问题的 fiddle - http://www.bootply.com/127620

谢谢!

Answer 1

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