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