Question

我已经搜索过一个解决方案但找不到任何解决方案..

我正在使用Bootstrap，我在列中有列，但它接缝就像我错过了一些东西。请参阅jsfiddle上的示例以获取更多信息：

    <div class="row">
    <div class="yellow col-xs-4">

    </div>
    <div class="green col-xs-4">

    </div>

    <div class="orange col-xs-4">

    </div>

如何使.problem列适合这些... ...（取全宽）

    <div class="height grey col-xs-8">        
        <div class="yellow col-xs-4 problem">problem</div>
        <div class="green col-xs-4 problem">problem</div> 
    </div>
    <div class="height grey col-xs-4">
        <div class="orange col-xs-4 problem">problem</div>  
    </div>
</div>

Answer 1

您需要在div.row内的其他列中嵌套列。此外，在嵌套列时，您仍然在其父级内部使用12列的流体网格。这是更新的标记：

<div class="container">
    <div class="row">
        <div class="yellow col-xs-4">           
        </div>
        <div class="green col-xs-4">
        </div>
        <div class="orange col-xs-4">
        </div>  
    </div>
    <div class="row">      
        <div class="height grey col-xs-8"> 
            <div class="row">
                <div class="yellow col-xs-6 problem">problem, this column should have the same width as over</div>
                <div class="green col-xs-6 problem">problem, this column should have the same width as over</div> 
            </div>
        </div>
        <div class="height grey col-xs-4">
            <div class="row">
                <div class="orange col-xs-12 problem">problem, this column should have the same width as over</div>  
            </div>
        </div>
    </div>
</div>

基本上，这里所做的是在每个列中包含嵌套的rows，其中包含列内部的列，并适当地更改col-xs-#列类值，以便每个父容器最多可添加12列。看起来你应该花一点时间熟悉流体网格以及网格内的嵌套网格是如何工作的。

JSFiddle

Official Bootstrap CSS documentation for nesting grid elements

修改：更新JSFiddle并添加.container包装div

Answer 2

http://jsfiddle.net/52VtD/3172/

列，甚至是嵌套的，应该总和为12.最好将嵌套列包装在它们自己的行div中，尽管它可能不是完全必要的。

<div class="row">
    <div class="yellow col-xs-4">

    </div>
    <div class="green col-xs-4">

    </div>

    <div class="orange col-xs-4">

    </div>        
<br/>        
    how to I get the problem colums to fit like those over..
    <div class="height grey col-xs-8">
        <div class="row">
          <div class="yellow col-xs-6 problem">problem, this column should have the same width as over</div>
          <div class="green col-xs-6 problem">problem, this column should have the same width as over</div>
        </div>
    </div>
    <div class="height grey col-xs-4">
        <div class="row">
          <div class="orange col-xs-12 problem">problem, this column should have the same width as over</div>
        </div>
    </div>
</div>

Answer 3

嵌套列的最大值应为12。

<div class="height grey col-xs-12">        
    <div class="yellow col-xs-4 problem">problem, this column should have the same width as over</div>
    <div class="green col-xs-4 problem">problem, this column should have the same width as over</div>
    <div class="orange col-xs-4 problem">problem, this column should have the same width as over</div>  
</div>

列内的列不会填充宽度

3 个答案: