AngularJS + Bootstrap：两个 col-xs-6 列不会对齐答案

【问题标题】：AngularJS + Bootstrap: Two col-xs-6 columns will not alignAngularJS + Bootstrap：两个 col-xs-6 列不会对齐
【发布时间】：2015-10-03 20:47:10
【问题描述】：

我在这上面浪费了 4 个小时。我在四列中有四个对象。当视图变小时，我有一个 6 宽的列而不是 3 宽。他们拒绝并排，并且没有 clearfix 类放置解决了它。 Firefox 和 Chrome。

<div class="row" ng-controller="LocationsMainPageController as locMainCtrl">
    <div class="col-md-3 col-xs-6" ng-repeat="loc in locMainCtrl.locations">
        <img class="img-responsive img-thumbnail"
             ng-src="{{ loc.images['0'].image }}"
             alt="{{ loc.raw }}">

        <h2>{{ loc.raw }}</h2>

        <p class="hidden-xs">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
            vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
            cursus magna.</p>

        <p><a class="btn btn-default" href="#" role="button">Go Here! &raquo;</a></p>
    </div>
    <!-- /.columns -->
</div>
<!-- /.row -->

如您所见，我已经使用 AngularJS 遍历了对象。我想不出为什么这很重要，但以防万一！这是一张图片 - 没有代表所以我不能直接发布它。对不起。

http://i.stack.imgur.com/1PJRg.jpg

有人可以帮忙吗？当然不是我一个人？？

【问题讨论】：

请提供一个 Plunker 示例。这将有助于查看您正在使用什么 CSS?JS（AnguarlJS、Bootstrap）。另外，请告知，您使用的是 Bootstrap 还是 UI-Boostrap (For Angular)？请看scotch.io/tutorials/…
这似乎是因为桑给巴尔比斯普利特高，所以普吉岛并没有一直飘到左边。这可以通过在每个 div 上设置一个固定的最小高度来解决，或者通过清除每个奇数列来解决。你能把最终的 HTML+CSS 贴在小提琴里让我们看看吗？
您好，这只是您的图片大小不同的情况，您可以尝试将所有图片调整为统一大小。对了……你展示的Split的图片，其实是Dubrovnik的图片。
哈哈 - 你看不到，但“分割”图像实际上命名为 Dubrovnik.jpg。发展图！明天我会尽快发布 Plunker。同时，它是 jQuery、Bootstrap 3.3.5 的默认设置，没有自定义 CSS。如果我使用以下建议之一修复它，我将发布一个带有解决方案的 Plunker。

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

多次感谢大家的帮助和启发。特别感谢@Jared 建议添加基于$index 的clearfix div。这是我在 AngularJS 中不了解的领域，您的建议帮助我研究了它。

这是我想出的解决方案。

      <!-- Four columns below the carousel -->
<div class="row" ng-controller="LocationsMainPageController as locMainCtrl">
    <!-- Wrapper Div -->
    <div ng-repeat="loc in locMainCtrl.locations">
        <div class="col-md-3 col-xs-6">
            <img class="img-responsive img-thumbnail"
                 ng-src="{{ loc.images['0'].image }}"
                 alt="{{ loc.raw }}">

            <h2>{{ loc.raw }}</h2>

            <p class="hidden-xs">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor
                id nibh ultricies
                vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
                cursus magna.</p>

            <p><a class="btn btn-default" href="#" role="button">Go Here! &raquo;</a></p>
        </div>
        <!-- Clearfix Div -->
        <!-- $index is 0-based -->
        <div ng-if="$odd" class="clearfix"></div>
    </div>
    <!-- /.columns -->
</div>
<!-- /.row -->

如您所见，在 ng-repeat 中有一个名为 $odd 的属性。 docs 中还有其他人。通过创建一个周围的 div 并使用 ng-if 访问 $odd 属性，我能够在适当的时间添加 clearfix。

再次感谢大家！

【讨论】：

【解决方案2】：

我以前也遇到过类似的问题，试着用这种方式创建你的 4 个块：

<div class="row row-centered" ng-controller="LocationsMainPageController as locMainCtrl">
   <div class="col-md-3 col-xs-6 col-centered" ng-repeat="loc in locMainCtrl.locations">
   </div>
</div>

并添加这个 css 类

.row-centered {
   text-align: center;
}
.col-centered {
  display:inline-block;
  float:none;
  /* reset the text-align */
  text-align:left;
  /* inline-block space fix */
  margin-right:-4px;
}

我已经对其进行了测试，并且可以正常工作，希望对您有所帮助。

【讨论】：

【解决方案3】：

啊，我以前遇到过这个问题。原因是图像高度不完全相同，导致网格混乱。修复很简单，只需给图像一个固定的高度。将其粘贴到您的 CSS 中：

.thumbnail img {
  min-height: 150px;
  height: 150px;
}

并将缩略图类添加到父div：

<div class="thumbnail col-md-3 col-xs-6" ng-repeat="loc in locMainCtrl.locations">

【讨论】：