布尔玛重叠项目

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

在它的最新版本中尝试 is-gapless 以及列类

Answer 2

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

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

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

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

!important 可能不是必需的。我只是添加它以确保您的规则占上风。