Question

我已经浪费了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

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

Answer 1

啊，我之前遇到过这个问题。原因是图像高度不尽相同，导致网格混乱。修复很简单，只需给图像一个固定的高度。坚持你的css：

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

将缩略图类添加到父div：

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

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

.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;
}

我已经测试了它并且它有效，我希望它有所帮助。

Answer 3

多亏了你们的帮助和灵感。特别感谢@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并使用$odd访问ng-if属性，我能够在适当的时候添加clearfix。

再次感谢大家！

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

3 个答案: