Bulma重叠项目

Question

我使用bulma.css作为布局，但是当我给某个东西一个边框时，我发现它是重叠的。

以下是重叠：

​

​

.shop div看上去像预期的那样

​

​

但.basket指数似乎有所上升。

​

​

下面是一个演示的链接

和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;
}

我觉得这和.柔韧箱？我没有把握!

Answer 1

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

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

​

​

就推翻它吧。将此添加到代码中：

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

!important可能不是必要的。我加进去只是为了确保你的统治占上风。

Answer 2

在它的最新版本中，try是-gapless以及列类。