布尔玛重叠的项目

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可能没有必要。我只是添加它以确保您的规则占上风。