Question

我要做的是在大型和中间设置中分别有两列3个嵌套的粉红色方块，然后在小屏幕上使用3个粉红色正方形的单个色谱柱，然后是另一个具有3个粉红色方块的单个色谱柱。然后在xs移动级别，我试图再次有两列，但每列有一列嵌套的粉红色方块。我认为这是我的css要求的，但那不是发生了什么:(我在这里做错了什么？

Here's a plunker

这是html：

 <div class="container">   
  <div class="row">

    <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
      <div ng-repeat="x in things"> 
        <div class="col-xs-6 col-sm-4 col-md-4">
          <div class="cube">
            <b>{{x.title}}</b> </br> {{x.content}}

          </div>                
        </div>  
      </div>
    </div>

    <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
        <div ng-repeat="x in things2"> 
         <div class="col-xs-6 col-sm-4 col-md-4">
          <div class="cube">
            <b>{{x.title}}</b> </br> {{x.content}}

          </div>                
         </div> 
        </div>
    </div>

  </div>

Answer 1

您似乎对课程结束时的数字感到困惑。

将.col-xs-6嵌套在另一个.col-xs-6中时，您将获得一个只占宽度50％的列。

这是12列网格的主要原则。除以100% / 12 = 8.33333333333%，您将获得百分比中单个列的width属性，请注意，百分比宽度是根据父宽度计算的。

在嵌套时，Bootstrap网格没有提供信息。

EG。将.col-xs-6视为width: 50%;，.col-xs-4为width: 33.33333%;

Answer 2

halfzebra是对的。如果您嵌套列，则在另一列中总是有新的12列。

<div class="col-md-6">
    <div class="row">
        <div class="col-md-12">
            This will fill col-md-6
        </div>
    </div>
</div>

和上面的例子一样，我总是喜欢在我开始使用行时。

我不知道我是否帮助你，但你可以这样做：

<div class="container">   
    <div class="row">
        <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
            <div class="row">
                <div class="col-md-12">
                    <h4>My Subtitle</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
                    <div class="cube">
                        <b>{{x.title}}</b> </br> {{x.content}}
                    </div>              
                </div>
            </div>
        </div>  
        <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
            <div class="row">
                <div class="col-md-12">
                    <h4>My Subtitle 2</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
                    <div class="cube">
                        <b>{{x.title}}</b> </br> {{x.content}}  
                    </div>              
                </div>  
            </div>
        </div>
    </div>
</div>

请注意，您的红色框并不总是适合列。我将宽度更改为100％，以便您可以看到列的行为方式。

Plunker：http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview

Bootstrap网格嵌套列问题

2 个答案: