html - 布尔玛嵌套柱

Question

我怎样才能在布尔玛上标记这个？我正在尝试使用下面的代码，但我需要限制第一列里面只有 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

你可以使用列

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

Answer 2

我建议使用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>