布尔玛重叠项目

Question

我正在使用 bulma.css 进行布局，但是当我给某些东西设置边框时，我发现它重叠了。

这是重叠部分：

.shop div 好像是 'as expected'

但是 .basket div 似乎有点爬升。

和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 以及列 class

布尔玛重叠项目

Bulma overlapping items

html

css

bulma