Вложенные строки с системой сетки bootstrap?

Question

Вложенные строки с системой сетки bootstrap?

Я хочу 1 большее изображение с 4 меньшими изображениями в формате 2x2, Как это:

Figure 1 Example

моей первой мыслью было разместить все в одном ряду. Затем создайте два столбца, а во втором столбце создайте две строки и два столбца, чтобы создать эффект 1x1 и 2x2.

однако, это кажется невозможным, или я просто не делаю это правильно?

882 2

css html5 twitter-bootstrap grid grid-system

2 ответов:

Comments

Ничего не найдено.

KyleMit · Accepted Answer · 2018-01-25 00:57:47

Bootstrap Версии 3.x

как всегда, прочитайте отличную документацию Bootstrap:

3.х документов: https://getbootstrap.com/docs/3.3/css/#grid-nesting

убедитесь, что строка родительского уровня находится внутри .container элемент. Всякий раз, когда вы хотите вложить строки, просто откройте новый .row внутри вашей колонки.

вот простой макет для работы с:
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>
Версия Bootstrap 4.0

4.0 Docs: http://getbootstrap.com/docs/4.0/layout/grid/#nesting

вот обновленная версия для 4.0, но вы действительно должны прочитать весь раздел docs в сетке, чтобы понять, как использовать эту мощную функцию
<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>
демо на скрипке jsFiddle 3.x/jsFiddle 4.0

который будет выглядеть так (С небольшим добавлением укладка):

ezzadeen · Accepted Answer · 2018-01-03 16:11:55

добавление к тому, что @KyleMit сказал:

рассмотрите возможность использования col-md-* классы для больших

внешние колонки и col-xs-* классы для маленьких

внутренний столбцов

это будет полезно при просмотре страницы на разных размерах экрана. На маленьком экране используйте:

обертывание большего

внешние столбцы будут происходить при сохранении меньшего

внутренней колонны, если возможно