布尔玛嵌套列

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

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