html - 最好使用 Bootstrap 的 HTML/Row 类将一堆 div 包装在一个全 Angular 容器中？

Question

我总是把每一“行”填满，除非，当然，它是最后一行，例如，只有另外两个元素。这是一个全 Angular 容器。基本上我试图避免这样的情况(其中“x”==一个div元素)，当浏览器缩小并且行上似乎有一个空白空间时。这些方法是否有利有弊？

     XXX
      XX
     XXX
     XXX
      XX
     XXX

可能的方法 #1:

 <div class="container">
     <div class="row">
         <div class="col-md-12">
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
             <div class="item">Item</div>
        </div>
     </div>
</div>

可能的方法#2:

 <div class="container">
     <div class="row">
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
     </div>
</div>

可能的方法 #3:

 <div class="container">
     <div class="row">
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
     </div>
     <div class="row">
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
     </div>
     <div class="row">
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
             <div  class="col-md-4">Item</div>
     </div>

</div>

Answer 1

第三种方法是您想要的。每次调用行类时，它都会清除该行，以便该行永远不会有更少的元素，如果元素的高度不同，这可能会在第二种方法中发生。