Bulma嵌套列

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

您可以使用列

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

​