Jak sprawić, by kolumna Bootstrap obejmowała wiele wierszy?

158

Próbuję wymyślić, jak wykonać następującą siatkę za pomocą Bootstrap.

Nie jestem pewien, jak utworzyłbym pudełko (numer 1), które obejmuje dwa rzędy. Pudełka są generowane programowo w kolejności, w jakiej są ułożone. Ramka 1 to wiadomość powitalna.

wprowadź opis obrazu tutaj

Jakieś pomysły, jak najlepiej to zrobić?

css twitter-bootstrap James Jeffery
źródło
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , Możesz zagnieżdżać system siatki Bootstrap.
TheHippo
1
Czyli utworzyć 2 wiersze zamiast 3, zagnieżdżając 2 wiersze w pierwszym wierszu? Może to być problematyczne, gdy skrzynki są generowane programowo.
James Jeffery
1
Nie mam pojęcia, czy to zadziała, ale czy dodanie pull-leftklasy do wszystkich pól zadziała? nie sprawi, że pudełko 1 będzie miało taką samą wysokość jak 2 + 4, ale powinno pozwolić mu działać po ustawieniu wysokości.
Hailwood
Hailwood, podaj to jako odpowiedź, jeśli możesz, jeśli nie, wkleję swój kod. Zadziałało ... przynajmniej na Chrome. Musisz to przetestować w innych przeglądarkach.
James Jeffery
@Hailwood faktycznie, nie jest potrzebne ciągnięcie w lewo. Wystarczy ustawić wysokość pierwszego elementu.
James Jeffery

Odpowiedzi:

164

W przypadku 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>
Rozwiń fragment

W przypadku Bootstrap 2:

Pokaż fragment kodu

Zobacz demo na JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

Mastergalen
źródło
Jak można sprawić, by pola czwarte i piąte wypełniały wysokość rzędu w miarę wzrostu prostokąta?
Imran NZ
2
stackoverflow.com/questions/19695784/…
Mastergalen
Ten przykład nie do końca działa, dolna krawędź pierwszej kolumny jest nieznacznie źle wyrównana z resztą.
JackKalish,
To świetna odpowiedź, ale co by było, gdyby pole 5 również musiało zostać rozszerzone do wiersza 3, a co więcej, dynamicznie?
Misha'el
@ Misha'el To całkiem proste, po prostu zrób to, co zrobił dla pudełka 1 i zastosuj to do pudełka 3/5. Powinny istnieć 3 równe kolumny, jedna na zewnątrz zawierałaby tylko 1 wiersz, a ta wewnątrz dwóch rzędów.
Nathan Williams
17

Jak sugerują komentarze, rozwiązaniem jest użycie zagnieżdżonych rozpiętości / wierszy.

<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
źródło
1

Poniższy przykład wydaje się działać. Wystarczy ustawić wysokość pierwszego elementu

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

Nie mogę się powstrzymać od myślenia, że ​​to niewłaściwe użycie wiersza.

James Jeffery
źródło
1

Wydaje mi się, że część dotycząca łączenia wierszy została szczegółowo omówiona (tj. Poprzez zagnieżdżanie wierszy), ale natknąłem się również na problem, że moje zagnieżdżone wiersze nie wypełniają swojego pojemnika. Podczas gdy flexbox i ujemne marginesy są opcją, znacznie łatwiejszym rozwiązaniem jest użycie predefiniowanej h-50klasy na rowzawierających pola 2, 3, 4 i 5.

Uwaga: używam Bootstrap-4, po prostu chciałem się podzielić, ponieważ napotkałem ten sam problem i stwierdziłem, że jest to bardziej eleganckie rozwiązanie :)

Shareef Hadid
źródło
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 Naidu
źródło