AngularJS + Bootstrap:两个color -xs-6列不会对齐

AngularJS + Bootstrap: Two col-xs-6 columns will not align

本文关键字：对齐 -xs-6 color Bootstrap 两个 AngularJS      更新时间：2023-09-26

我在这上面浪费了4个小时。在四列中有四个对象。当视图变小时，我有一个6宽的列而不是3宽的列。它们拒绝并排运行，并且没有明确的类放置来解决这个问题。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循环遍历了这些对象。我想不出这有什么关系，但以防万一!这是一张照片——没有代表，所以我不能直接发布。对不起。

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

有人能帮忙吗?当然我不是唯一一个??

啊，我以前遇到过这个问题。原因是图像高度不完全相同，导致网格混乱。修复很简单，只是给图像一个固定的高度。把它放到你的css中:

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

将缩略图类添加到父div:

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

我以前遇到过类似的问题，尝试以这种方式创建您的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;
}

我已经测试过了，它可以工作，我希望它能有所帮助。

感谢大家多次的帮助和启发。特别感谢@Jared提出的基于$index添加clearfixdiv的建议。这是我在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。文档里还有其他人。通过创建周围的div并使用ng-if访问$odd属性，我能够在适当的时候添加清除修复。

再次感谢大家!

相关文章：