使用Bootstrap 3类，但只有一半的页面

Question

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

为清楚起见：

紫色的divs＆＃39;宽度基于其父级的百分比，而我希望它们具有相同的宽度，就好像它们是container的直接子级，同时能够将它们分开（并将它们包裹起来）与其他相邻的div（标记为col-xs-6的每个div将从完全不同的服务器端控件呈现）。

注意：暂时忽略我为XS显示设置这些样式的事实，这只是暂时的，当我计算出样式然后我会相应地修改它们。 / p>

Answer 1

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

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

内部div的总和应该加起来为12

Answer 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