css - 为什么 col-md-4 列从右边开始并在下一行留下一个空格

Question

我正在显示搜索结果列表。我使用 bootstrap 中的 col-md-4 每行显示 3 个结果——有点像 3 张卡片。然而，当它移动到下一行时，它从右边开始，然后下一个元素只出现在下一个左边......基本上跳过一列。

以下代码根据需要重复多次。最终目标是像网格一样显示结果。

<div class="outer-listings-container row-space-8">
  <div class="row row-condensed listings-container">
   <!-- PART TO REPEAT -->
    <div class="col-md-4 row-space-1" data-id="36">
                        <div class="result">
                            <div class="panel-image listing-img">
                                <div id="36" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner" role="listbox">
                                        <div class="item active">
                                            <a class="center-block" href="#">
                                                <div class="center-block">
                                                  <img class="img-responsive center-block" src="#">                                                                                         </div>
                                            </a>
                                        </div>  
                                          <div class="item">                                                    
                                            <a class="" href="#">
                                                <div class="center-block">
                                                    <img class="img-responsive center-block" src="#">
                                                </div>
                                            </a>
                                        </div>      
                                      </div>                                            
                                    <div>
                                        <a class="left carousel-control height-test" id="36" href="#36" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                    </div>

                                    <div>
                                        <a class="right carousel-control height-test" id="36" href="#36" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="panel-overlay-bottom-left panel-overlay-label panel-overlay-listing-label">
                                    <div>
                                        <sup class="h6">€</sup>
                                        <span class="h3">456</span>
                                        <sup class="h6">EUR</sup>
                                        <span class="h6">/session of 2 hours</span>
                                    </div>  
                                </div>
                            </div>
                            <div class="panel-body panel-body-result">
                                <h4>
                                    <div class="row">
                                            <div class="col-xs-2">
                                                    <img src="#" class="avatar-sm" alt="Banana">                                                </div>
                                            <div class="col-xs-10">
                                                    <a href="#">Banana R</a>
                                                    <br>
                                                    <small>Banana R</small>
                                            </div>
                                    </div>


                                </h4>
                                <span class="stars2"><span style="width: 0px;"></span></span>
                                <span><b class="review_score">0</b> (0 reviews)</span>
                                <p>blabla</p>
                                <p>more blabla  </p>                                                                                                                                        
                            </div>
                        </div>
                    </div>
                    <!-- END REPEAT -->
                   </div>
                  </div>

问题可以在以下页面看到:https://gokyma.com/search?location=Paris%2C+France&country=FR&city=Paris&state=IDF&stype=5&selected_date=&selected_time=&_token=ZHXfiseRlAgE3fLY0f1ywr7qYzj9eFxGkSZ2SFIS

Answer 1

好吧，您的 jsfiddle 代码并不能真正代表问题，但我想一个解决方案可能是添加 <div class="row"></div>对于每个系列 3 col-md-4你在每一行中都有。所以，这个片段看起来像这样；

<row> <col-md-4> <col-md-4> <col-md-4> </row>

请记住，一行不能包含超过 12 列......这是另一件需要考虑的事情......