Question

我正在尝试使用以下布局设置基于图块的仪表板（无需使用布尔玛图块）：

https://jsfiddle.net/foobarbazian/9szfn8db/2/

<div class="container">
  <br>
  <div class="columns is-multiline">
    <div class="column is-3">
      <div class="box has-background-success">
        <p class="title has-text-centered">One</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-3">
      <div class="box has-background-danger">
        <p class="title has-text-centered">Two</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-3">
      <div class="box has-background-success">
        <p class="title has-text-centered">Three</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>        
  </div>
</div>

但是我可以看到左边的间隙在盒子右边的间隙处较小，每个盒子的底部也有一个间隙。

如何确保将内容放在每个框的中间？

Answer 1

 
.columns {
   flex-wrap: wrap; 
   justify-content: space-between
}
.column.is-5 {
height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="container">
  <br>
  <div class="columns is-multiline">
<div class="column is-3">
  <div class="box has-background-success">
    <p class="title has-text-centered">One</p>
    <div>
      <div class="columns ">
        <div class="column box is-5">A</div>
       
        <div class="column box is-5">B</div>
      
        <div class="column box is-5">C</div>
       
        <div class="column box is-5">D</div>
       
      </div>
    </div>
  </div>


</div>

如何在Bulma中集中对齐列？

1 个答案: