Вкладені рядки з системою завантажувальної мережі?

196

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

Рисунок 1 Приклад

Моя початкова думка полягала в тому, щоб розмістити все в одному ряду. Потім створіть два стовпці, а у другому стовпці створіть два рядки та два стовпчики для створення ефекту 1x1 та 2x2.

Однак це здається неможливим, або я просто не роблю це правильно?

— Грег
джерело

Будь ласка, опублікуйте HTML / CSS, який ви пробували до цього часу.

— Стів Сандерс

Спробуйте це: jsfiddle.net/KXje2/9 Я відредагував свою скрипку для розміщення великих для додаткових маленьких екранів.

— BuddhistBeast

Чи працював вищевказаний код для вас? ...

— BuddhistBeast

299

Версія для завантаження 3.x

Як завжди, читайте чудову документацію Bootstrap:

3.x Документи : 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>

Версія для завантаження версії 4.0

4.0 Документи : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Ось оновлена версія для 4.0, але ви дійсно повинні прочитати весь розділ документів у сітці, щоб зрозуміти, як використовувати цю потужну функцію

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

Демо в Fiddle jsFiddle 3.x | jsFiddle 4.0

Як це буде виглядати приблизно так ( з невеликою кількістю доданого стилю ):

скріншот

— KyleMit
джерело

Вибачте, що викрали 1-річну нитку, але чи знаєте ви, як отримати 0px між зображенням та 1 та 3

— alex

@alex, звичайно - просто встановити margin: 0;на .mini-boxелемент. Мій приклад був просто додаванням одного для наочності, але ви можете просто видалити рядок взагалі. Ось демонстрація

— KyleMit

чому між рядком для міні-скриньки 2 немає і рядком для міні-скриньки 3? і що буде, якщо є?

— пашуте

@pashute см Bootstrap 3 сітки, це дійсно важливо , скільки стовпців в рядку? . Кожна міні-скринька займає 50% наявного місця (обмежена стовпчиком), тому два займуть перший рядок. Будь-які зайві просто перейдуть у новий рядок. Ви також можете з'єднати кожен з них рядками, але цього не потрібно. За замовчуванням обгортання завантажується за замовчуванням, тому вам не доведеться захаращувати розмітку новими рядками. Якщо це семантично значуще, я б сказав, продовжуйте це робити. Але якщо ви просто відображаєте список із 4-х об'єктів, збережіть їх у одному рядку.

— KyleMit

@ user3921890, це занадто велика тема, щоб відповісти в рядку коментарів. Чи можете ви опублікувати новий потік з поясненням того, що ви намагаєтеся зробити, і хоча б одну спробу зробити це, а потім посилання на це тут.

— КайлМіт

Додавши до сказаного @KyleMit, подумайте про використання:

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

Це стане в нагоді при перегляді сторінки на різних розмірах екрана.

На невеликому екрані згортання більших зовнішніх стовпців відбуватиметься при збереженні менших внутрішніх стовпців, якщо це можливо

— ezzadeen
джерело