布爾瑪重疊的項目

Question

我使用bulma.css作爲佈局，但是當我給一個邊界時，我發現它的重疊。

這裏是重疊：

的.shop DIV似乎 '預期'

但.basket DIV似乎蠕動了一下。

Here is a link to a demo

和HTML：

<div id="app"> 
    <div class="container"> 
    <div class="shop"> 
     <div class="columns"> 
     <div class="column is-one-quarter product"> 
      <h3 class="title is-4">Cat</h3> 
      <p> 
      £<span>2.99</span></p> 
      <div><button class="button">Add to basket</button></div> 
     </div> 
     <div class="column is-one-quarter product"> 
      <h3 class="title is-4">Dog</h3> 
      <p> 
      £<span>4.00</span></p> 
      <div><button class="button">Add to basket</button></div> 
     </div> 
     </div> 
    </div> 
    <div class="basket"> 
     <h1>Basket</h1> 
     <table class="table"> 
     <thead> 
      <tr> 
      <td>Item</td> 
      <td>Quantity</td> 
      <td>Price</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td colspan="3">No items in the basket</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
</div> 

CSS：

// All of bulma.css 
html,body{ 
    height:100%; 
    padding:20px; 
} 

.product{ 
    box-sizing:border-box; 
    border:2px solid #eaeaea; 
    padding:20px; 
} 

我認爲它是與... Flexbox的？我不確定！

Answer 1

底部容器攀升過頂容器，因爲在布爾瑪代碼此規則：

.columns:last-child { 
    margin-bottom: -.75rem; 
} 

只是覆蓋它。添加到您的代碼：

.columns:last-child { 
    margin-bottom: 0 !important; 
} 

!important可能沒有必要。我只是添加它以確保您的規則佔上風。