使用 Bootstrap 3 类，但只占页面的一半答案

【问题标题】：Working with Bootstrap 3 classes but for only half of the page使用 Bootstrap 3 类，但只占页面的一半
【发布时间】：2014-06-13 16:49:36
【问题描述】：

我需要两个 div 并排放置，在这些 div 中将是具有 bootstrap 3 类的 div。问题是，当我通过使用col-xs-6 将左 div 限制为 50% 时，子元素上的 col-xs-... 类则只响应其父元素的宽度。

为清楚起见：

紫色 div 的宽度基于其父级的百分比，而我希望它们的宽度与 container 的直接子级相同，同时能够将它们分开（并包装它们) 来自另一个相邻的 div（标记为 col-xs-6 的每个 div 将从完全不同的服务器端控件呈现）。

注意：暂时忽略我正在为 XS 显示器设计这些样式的事实，这只是暂时的，当我制定样式时，我会相应地修改它们。

【问题讨论】：

标签： css twitter-bootstrap dom html twitter-bootstrap-3

【解决方案1】：

对于三个紫色 div，您可以使用 col-xs-4

http://getbootstrap.com/css/#grid-nesting

内部 div 的总和应为 12

【讨论】：

【解决方案2】：

您应该在内部添加另一行以创建 12 列的新实例。你可能想看看 Bootstrap 所说的 Nesting Columns

<div class="container">
    <div class="row">
        <div class="col-xs-6 blue-back">
            <div class="row">
                <div class="col-xs-4 black-back">
                </div>
                <div class="col-xs-4 black-back odd">
                </div>
                <div class="col-xs-4 black-back">
                </div>
            </div>
        </div>
        <div class="col-xs-6 blue-back">
            <div class="row">
                <div class="col-xs-4 black-back">
                </div>
                <div class="col-xs-4 black-back odd">
                </div>
                <div class="col-xs-4 black-back">
                </div>
            </div>
        </div>
    </div>
</div>

试试这个JSFiddle

【讨论】：