布尔玛重叠项目

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

由于Bulma代码中的此规则，底部容器正在顶部容器上爬行：

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

只需覆盖它。将其添加到您的代码中：

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

可能没有必要

!important。我刚刚添加它以确保您的规则占上风。

Answer 2

在最新版本中，请尝试is-gapless和column类