Как я могу получить столбец 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, но оно должно позволить ему работать, когда вы устанавливаете высоту.
Hailwood
Хейлвуд, поставь это как ответ, если сможешь, если нет, я вставлю свой код. Это сработало ... по крайней мере, на Chrome. Нужно проверить это в других браузерах.
Джеймс Джеффри
@ Хейлвуд, не нужно тянуть. Просто установка высоты на первый элемент работает.
Джеймс Джеффри

Ответы:

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/

Mastergalen
источник
Как бы вы сделали прямоугольники четвертые и пятые, заполнив высоту ряда по мере того, как поле один растет?
Имран NZ
2
stackoverflow.com/questions/19695784/…
Mastergalen
Это пример не совсем работает, нижний край первого столбца слегка смещен с остальными.
JackKalish
Это отличный ответ, но что, если поле 5 необходимо расширить и в строку 3, а тем более динамически?
Мишаэль
@ 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

Я полагаю, что на часть, касающуюся того, как охватить строки, был дан полный ответ (т. Е. Путем вложения строк), но я также столкнулся с проблемой того, что мои вложенные строки не заполняют свой контейнер. В то время как flexbox и отрицательные поля являются опцией, гораздо более простым решением является использование предопределенного 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>
PS Найду
источник