布尔玛筑巢柱

Question

如何在Bulma上标记？我尝试使用下面的代码，但我需要限制第一列内部只有2个盒子，然后它将从左向右下移。在Bootstrap中，这很简单，但在Bulma中，它只在一行中压缩嵌套列。

<div class="tile is-ancestor">
 <div class="tile is-4 is-vertical is-parent">
  <div class="tile is-child box">
    <p class="title">One</p>
  </div>
  <div class="tile is-child box">
    <p class="title">Two</p>
  </div>
</div>
<div class="tile is-parent">
  <div class="tile is-child box">
    <p class="title">Three</p>
  </div>
</div>

Answer 1

我建议使用columns布局，以便您可以使用is-mobile修饰符。大致像：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css" rel="stylesheet"/>
<div class="columns">
    <div class="column is-half">
      <div class="columns is-mobile">
        <div class="column is-half">
          <div class="box">
            <figure class="is-128x128">
              <img src="http://bulma.io/images/placeholders/128x128.png">
            </figure>
          </div>
        </div>
        <div class="column is-half">
          <div class="box">
            <figure class="is-128x128">
              <img src="http://bulma.io/images/placeholders/128x128.png">
            </figure>
          </div>
        </div>
      </div>
      <div class="columns is-mobile">
        <div class="column is-half">
          <div class="box">
            <figure class="is-128x128">
              <img src="http://bulma.io/images/placeholders/128x128.png">
            </figure>
          </div>
        </div>
        <div class="column is-half">
          <div class="box">
            <figure class="is-128x128">
              <img src="http://bulma.io/images/placeholders/128x128.png">
            </figure>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-half">
      <figure class="is-480x480">
        <img src="http://bulma.io/images/placeholders/480x480.png">
      </figure>
    </div>
  </div>

Answer 2

您可以使用列

<div class="container">
  <div class=columns>
    <div class="column is-6">
      // map is here
    </div>
    <div class="column is-6">
      <div class="columns is-multiline">
        <div class="column is-6">
          // image is here
        </div>
        <div class="column is-6">
          // image is here
        </div>
        <div class="column is-6">
          // image is here
        </div>
        <div class="column is-6">
          // image is here
        </div>
      </div>
    </div>
  </div>
</div>