Boostrap 4 alpha 6行內卡行爲

Question

我使用引導4阿爾法6，並注意到一個奇怪的行爲，當一個卡的身體內部沒有卡塊的網格。

<div class="container"> 
    <h5> 
    The building block of a card is the .card-block. Use it whenever you need a padded section within a card. 
    </h5> 
    <h4> 
    row inside card "body" with class card-block 
    </h4> 
    <div class="card"> 
     <div class="card-header"> 
      Featured 
     </div> 
     <div class="card-block"> 
      <div class="row"> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <br> 
    <br> 
    <h4> 
    row inside card "body" without class card-block 
    </h4> 
    <div class="card"> 
     <div class="card-header"> 
      Featured 
     </div> 
     <div class="foo"> 
      <div class="row"> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="photo-box"> 
         <img class="img-fluid" src="http://placehold.it/400x300" alt="image"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我不想使用填充了我的卡

卡的積木的身體是.card塊。只要你需要卡內的填充部分，就使用它。

但我的網格出來的卡的身體。
是需要的行爲還是需要修復的錯誤？

謝謝

JSFiddle（開放式全景）

Answer 1

這是網格系統的期望行爲。 .row有一個負邊距來抵消網格列的填充，以便最左邊和最右邊的列與視口邊緣（或.row的容器邊緣）具有適當的對齊。另外，儘管負邊距存在，但每個網格列的內容仍然位於卡內，因爲每列中都有填充。

通常情況下，.row被放置在.container或.container-fluid之內，該區域具有15px的填充以抵消負邊距。 .card-block確實有填充，但它不是15px，這就是爲什麼.card-block不能將卡的網格內容完美對齊到card的邊緣。

所以，我不確定你想要達到什麼目的，但有另外兩種方法可以使用card中的網格。一種方法是使用.container-fluid，使得外網格列與卡的邊緣完全一致......

<div class="card"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-2"> 
        .. 
       </div> 
       <div class="col-md-2"> 
        .. 
       </div> 
       .. 
      </div> 
     </div> 
</div> 

另一種是使用gutterless行（.no-gutters）。這將從行中移除負邊距，並從所有列中移除填充。每列的內容然後取整列的寬度。

<div class="card"> 
     <div class="row no-gutters"> 
       <div class="col-md-2"> 
        .. 
       </div> 
       <div class="col-md-2"> 
        .. 
       </div> 
       .. 
     </div> 
</div> 

http://www.codeply.com/go/vE2EdNPQwV