Html 引导网格嵌套列问题_Html_Css_Twitter Bootstrap

Html 引导网格嵌套列问题

html css twitter-bootstrap

Html 引导网格嵌套列问题,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想做的是，在大屏幕和中屏幕设置下，分别设置两列，每列有3个嵌套的粉红色方块，然后在小屏幕平板电脑上，一列有3个粉红色方块，然后在另一列下有3个粉红色方块。然后在xs mobile级别，我再次尝试使用两列，但每列中有一列嵌套的粉红色方块。我认为这是我的css所要求的，但事实并非如此：（我在这里做错了什么以下是html： <div class="container"> <div class="row"> <div class="col-xs-

我想做的是，在大屏幕和中屏幕设置下，分别设置两列，每列有3个嵌套的粉红色方块，然后在小屏幕平板电脑上，一列有3个粉红色方块，然后在另一列下有3个粉红色方块。然后在xs mobile级别，我再次尝试使用两列，但每列中有一列嵌套的粉红色方块。我认为这是我的css所要求的，但事实并非如此：（我在这里做错了什么

以下是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>


我的字幕
{{x.title}
{{x.content}
我的副标题2
{{x.title}
{{x.content}

你似乎被课后的数字弄糊涂了

将

.col-xs-6

嵌套在另一个

.col-xs-6

中时，将得到一个只占宽度50%的列

这是12列网格的基本原理。除以

100%/12=8.33333%

，您将得到

width

单个列的百分比属性，请记住，百分比宽度是根据父级宽度计算的
嵌套时引导的网格没有信息

把
.col-xs-6
想象成
宽度：50%；
，
.col-xs-4
是
宽度：33.33333%；
你似乎被课后的数字搞糊涂了
将
.col-xs-6
嵌套在另一个
.col-xs-6
中时，将得到一个只占宽度50%的列
这是12列网格的基本原理。除以
100%/12=8.33333%
，您将得到
width
单个列的百分比属性，请记住，百分比宽度是根据父级宽度计算的
嵌套时引导的网格没有信息

例如，把
.col-xs-6
想象成
宽度：50%；
，
.col-xs-4
是
宽度：33.33333%；
半斑马是对的。如果你在另一个列中嵌套了12个列，你总是在另一个列中有新的12列

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

这将填充col-md-6
就像上面的例子一样，我总是喜欢在开始一行时使用行
我不知道我是否理解正确，但你可以这样做：

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

我的字幕 {{x.title} {{x.content} 我的副标题2 {{x.title} {{x.content}
请记住，您的红色框并不总是适合列。我将宽度更改为100%，以便您可以查看列的运行情况

Plunker:
halfzebra是对的。如果你嵌套列，你总是在另一列中有新的12列

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

这将填充col-md-6
就像上面的例子一样，我总是喜欢在开始一行时使用行
我不知道我是否理解正确，但你可以这样做：

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

我的字幕 {{x.title} {{x.content} 我的副标题2 {{x.title} {{x.content}
请记住，您的红色框并不总是适合列。我将宽度更改为100%，以便您可以查看列的运行情况

Plunker:
你有sx，应该是xsI刚刚发布了一个对angular的修复，现在它是你的html模板。问题的根源很简单。你在赶时间。花点时间去吸收dude…@ODelibalta:）事实上，我正试图发布上述内容，但是遇到了一个角度的问题：D谢谢你在另一个问题上的帮助：）@ScottSimpson谢谢Scott，现在粉色框在xs上恢复为两列，而不是我想要的两列（两列外部各有一个粉红色正方形嵌套列）。还有，为什么它们水平堆叠在一起呢？你有sx，应该是xsI刚刚发布了一个修复程序到你的angular，现在它是你的html样板。问题的根源很简单。你在赶时间。花点时间来吸收，伙计…@ODelibalta:）事实上，我正试图发布上述内容，但遇到了一个角度问题：D谢谢你在另一个方面的帮助：）@ScottSimpson谢谢Scott，现在粉色框在xs上恢复为两列，而不是我想要的两列（两个外部列，每个列有一个粉红色正方形的嵌套列）。还有，为什么它们水平堆叠在一起？非常感谢，是的，这也是我最后得出的结论，感谢你的澄清和解释。我认为引导可能会有点让人头疼：D-我想知道，150px的宽度是否是这些立方体的最佳宽度（这些实际上代表了平铺的缩略图），关于移动设备的320px和平板电脑的任何东西，就像我使用的一样