AngularJS + Bootstrap：兩個col-xs-6列不對齊

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的屬性。 文檔中還有其他內容。 通過創建一個周圍的div並使用ng-if訪問$odd屬性ng-if我能夠在適當的時候添加clearfix。

再次感謝大家！