代码之家 › 专栏 › 技术社区 › MaYaN

如何在bulma中居中对齐列?

bulma css html

0

MaYaN · 技术社区 · 6 年前

我正在尝试使用以下布局的基于图块的仪表板(不必使用bulma图块):

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>

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

我如何才能确保内容被很好地放置在每个框的中间?

1 回复 | 直到 6 年前

1

Nandita Sharma 6 年前

 
.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>