Столбик гнездовой Bulma

Как я могу сделать это на 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>

enter image description here


html bulma semantic-markup
person Alyssa Reyes    schedule 06.05.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

вы можете использовать столбцы

<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>
person Amir akbari    schedule 03.07.2019

arrow_upward
0
arrow_downward

Я рекомендую использовать макет 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>

person Jake Ceballos    schedule 06.05.2017