Як я можу отримати стовпець Bootstrap, щоб охопити кілька рядків?

158

Я намагаюся розібратися, як зробити наступну сітку з Bootstrap.

Я не впевнений, як я створив би вікно (номер 1), яке охоплює два ряди. Поле генерується програмно в тому порядку, в якому вони викладені. Графа 1 - вітальне повідомлення.

введіть тут опис зображення

Будь-які ідеї щодо найкращого шляху з цим?

css  twitter-bootstrap 
— Джеймс Джефрі
джерело
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , Ви можете вкласти сітку Bootstrap.
— TheHippo
1
Отже, створіть 2 ряди, а не 3, вклавши 2 ряди в першому ряду? Це може бути проблематично, коли поля формуються програмно.
— Джеймс Джефрі
1
Не маю ідеї, чи спрацювало б це, але чи додасть pull-leftклас до всіх скриньок? він не зробить поле 1 такою ж висотою, як 2 + 4, але він повинен дозволити йому працювати, коли ви встановлюєте висоту.
— Гейлвуд
Хейлууд, поставте це як відповідь, якщо можете, якщо ні, я вставлю свій код. Це працювало ... принаймні на Chrome. Потрібно протестувати його в інших браузерах.
— Джеймс Джефрі
@Hailwood infact, тягнути ліворуч не потрібно. Просто встановлення висоти на першому елементі працює.
— Джеймс Джефрі

Відповіді:

164

Для Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Розгорніть фрагмент

Для Bootstrap 2:

Показати фрагмент коду

Дивіться демонстрацію на JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

— Мастергален
джерело
Як би ви зробили ящики чотири та п’ять заповнюють висоту рядка, коли поле зростає?
— Імран НЗ
2
— Mastergalen
Цей приклад не дуже працює, нижній край першого стовпчика трохи не вирівняний з рештою.
— JackKalish
Це чудова відповідь, але що робити, якщо поле 5 потрібно буде також поширювати на 3 рядок, і тим більше, динамічно?
— Misha'el
@ Misha'el Це досить просто, просто зробіть те, що він зробив для коробки 1, і застосуйте це до поля 3/5. Повинно бути 3 стовпчики однакового розміру, зовнішня сторона повинна містити всього 1 ряд, а внутрішня - два ряди.
— Натан Вільямс
17

Як свідчать коментарі, рішення - використовувати вкладені проміжки / рядки.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
— disrvptor
джерело
1

Наведений нижче приклад, здавалося, працює. Просто встановлення висоти на першому елементі

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Я не можу не допомогти, але думаю, що це неправильне використання рядка.

— Джеймс Джефрі
джерело
1

Я вважаю, що частина щодо простягання рядків була відповідена ретельно (тобто вкладення рядків), але я також зіткнувся з проблемою вкладених рядків, які не заповнюють їх контейнер. Незважаючи на те, що флексбокс та негативні поля є варіантом, набагато простішим рішенням є використання заздалегідь визначеного h-50класу на rowполях, що містять 2, 3, 4 та 5.

Примітка: Я використовую Bootstrap-4, я просто хотів поділитися, тому що я зіткнувся з тією ж проблемою і вважав, що це є більш елегантним рішенням :)

— Шаріф Хадід
джерело
0 
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
— Пс Найду
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.