列内的列不会填充宽度

Posted 2021-05-05

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

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

jsfiddle example

    <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>

答案

您需要将列嵌入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

另一答案

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>

另一答案

嵌套列的最大值应为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>