从布尔玛结束包裹

Question

我有两列使用 Bulma (0.7.1) 具有以下结构：

<section class="section">
  <div class="columns">
    <div class="column">
        <!-- column 1 -->
    </div>
    <div class="column">
        <!-- column 2 -->
    </div>
  </div>
</section>

当用户使用平板电脑或手机访问我的网站时，我希望我的第二列首先换行，即覆盖第一列。

Bulma 中是否有一个内置的 class 可以做到这一点？还是我必须自己写 CSS ？如果是这样，如何？

Answer 1

您可以使用 .is-multiline 来包装您的专栏 (Bulma)

和CSS

display: flex;   
flex-wrap: wrap;

与布尔玛

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<div class='columns is-multiline'>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <div class="card-image">
        colonne 
      </div>
      </div>
      <div class="card-content">
      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        colonne 2
      </div>
      <div class="card-content">
      </div>
    </div>
  </div>
</div>

Answer 2

好的，我用 CSS/Bulma 弄明白了，您可以添加 custom-columns 并使用 column-reverse 更改列的顺序。

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");

@media(max-width: 767px) {
  .custom-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

<div class="columns custom-columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>

从布尔玛结束包裹

wrap from end Bulma

html

css

bulma