html - 如何将 Bootstrap 3 Wells 放在同一行？

Question

这是我的 Bootstrap 3 jsFiddle ，尽管您可能需要在全屏 View 中查看它才能看到它的全部魅力。

如您所见，有两个 TB3“井”，分别称为 Herps 和 Derps。它们目前位于彼此之上，此外，它们比导航栏、超大屏幕和页脚井更宽。

我希望它们在同一行/“行”上彼此相邻，并且我希望这两个孔与所有其他内容的宽度相同。我还想在两个孔之间留一些填充(间距)，这样它们就不会彼此相邻。

我最好的尝试(来自上面的 jsFiddle):

<div class="row">
    <div class="span6">
        <div class="well">Herps</div>
    </div>
    <div class="span6">
        <div class="well">Derps</div>
    </div>
</div>

...似乎并没有成功。有什么地方会出错吗？

Answer 1

您需要为孔使用 col-x-y CSS 样式以获得适当的屏幕尺寸和列。在这种情况下，您可以使用 col-sm-6，因为您有两列。

<div class="row">
    <div class="col-sm-6">
        <div class="well">Herps</div>
    </div>
    <div class="col-sm-6">
        <div class="well">Derps</div>
    </div>
</div>

JSFiddle

Bootstrap Grid System