Question

我不知道我是不是错了，但过去常常是如果你的引导列增加到12以上（默认值），其余的就会降到新的“行”。我现在正在使用Bootstrap 3.x所以理论上有这个：

<div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
</div>

基本上与此相同：

<div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
</div>
<div class="row"> <!-- This would seem to 'drop' into a new row -->
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
</div>

我正在使用AngularJS v1.3.x创建多个4列，希望它们在不同的行中对齐：

<div class="row">
    <div class="col-xs-4" ng-repeat="item in ['Lorem Ipsum..', 1, 2, 3...]">{{item}}</div>
</div>

但是每列的高度不同（即'Lorem Ipsum ..'和单个数字）。您可以看到此plunker中发生的情况。他们没有将下一个12降到新的行，而是以某种方式“重叠”，使其看起来很好，直到存在差距。我想要的是实际上每12秒就会删除一行。

这是出于任何特定原因吗？我怎样才能以一种方式使用Angular，每次总共添加12行（3 x col-xs-4 = 12）。作为额外信息：数组是动态的，它一次永远不会保存相同数量的项目，这意味着我无法对其进行硬编码。

非常感谢任何想法，谢谢！

Answer 1

Responsive column resets

如果有四层网格可供使用，您必须遇到一些问题，在某些断点处，您的列不清楚，因为一个比另一个更高。要解决此问题，请使用.clearfix和responsive utility classes的组合。

基本上，它归结为浮点数在CSS / HTML中的工作方式，特别是当浮动的项目具有不同的高度时。并且Bootstrap的网格是使用浮点数实现的，因此这个浮动问题会影响它。

您特定情况的示例：

<div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
    <div class="clearfix"></div>
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
</div>

Bootstrap 3网格系统超过12个cols不会下降到新行

1 个答案:

Responsive column resets