Zagnieżdżone wiersze z systemem siatki bootstrap?

196

Chcę 1 większy obraz z 4 mniejszymi obrazami w formacie 2x2, takim jak ten:

Rysunek 1 Przykład

Moją pierwszą myślą było pomieszczenie wszystkiego w jednym rzędzie. Następnie utwórz dwie kolumny, a w drugiej kolumnie utwórz dwa rzędy i dwie kolumny, aby stworzyć efekt 1x1 i 2x2.

Nie wydaje się to jednak możliwe, czy po prostu nie robię tego poprawnie?

— Greg
źródło

Proszę zamieścić HTML / CSS, które próbowaliście do tej pory.

— Steve Sanders,

Spróbuj tego: jsfiddle.net/KXje2/9 Zmontowałem skrzypce, aby pomieścić duże i bardzo małe ekrany.

— BuddhistBeast

Czy powyższy kod działał dla Ciebie? ...

— BuddhistBeast

299

Bootstrap wersja 3.x

Jak zawsze przeczytaj wspaniałą dokumentację Bootstrap:

3.x Dokumenty : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Upewnij się, że wiersz poziomu nadrzędnego znajduje się w .containerelemencie. Ilekroć chcesz zagnieżdżać wiersze, po prostu otwórz nowe .rowwnętrze kolumny.

Oto prosty układ do pracy:

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

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

Oto zaktualizowana wersja 4.0, ale naprawdę powinieneś przeczytać całą sekcję dokumentacji w siatce, aby zrozumieć, jak wykorzystać tę zaawansowaną funkcję

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

Demo w Fiddle jsFiddle 3.x | jsFiddle 4.0

Który będzie wyglądał tak ( z odrobiną dodanego stylu ):

zrzut ekranu

— KyleMit
źródło

przepraszam za przejęcie rocznego wątku, ale czy wiesz, jak uzyskać 0px między obrazem a 1 a 3

— alex

@alex, pewny - wystarczy ustawić margin: 0;na .mini-boxelemencie. Moim przykładem było dodanie jednego dla jasności, ale możesz po prostu całkowicie usunąć linię. Oto demo

— KyleMit

dlaczego nie ma wiersza między kol dla miniboksu 2 i kol dla miniboksu 3? a co się stanie, jeśli będzie?

— pashute

@pashute, patrz Siatka Bootstrap 3, czy to naprawdę ma znaczenie, ile kolumn jest w rzędzie? . Każde mini pudełko zajmuje 50% dostępnego miejsca (ograniczone przez kolumnę), więc dwa zajmą pierwszy rząd. Wszelkie dodatkowe zostaną po prostu zawinięte w nową linię. Państwo może także powiązać każdy z nich w wierszach, ale nie muszą. Bootstrap jest domyślnie zawijany, więc nie musisz zaśmiecać znaczników nowymi wierszami. Jeśli ma to znaczenie semantyczne, powiedziałbym, że idź. Ale jeśli wyświetlasz listę 4 obiektów, trzymaj je w tym samym rzędzie.

— KyleMit,

@ user3921890, to zbyt duży temat, aby odpowiedzieć w wierszu komentarza. Czy możesz opublikować nowy wątek wyjaśniający, co próbujesz zrobić, i przynajmniej jedną próbę zrobienia tego, a następnie link do tego tutaj.

— KyleMit

Dodając do tego, co powiedział @KyleMit, rozważ użycie:

col-md-* klasy dla większych zewnętrznych kolumn
col-xs-* klasy dla mniejszych wewnętrznych kolumn

Przyda się to podczas przeglądania strony o różnych rozmiarach ekranu.

Na małym ekranie nastąpi wówczas zawijanie większych zewnętrznych kolumn, przy jednoczesnym zachowaniu mniejszych wewnętrznych kolumn, jeśli to możliwe

— ezzadeen
źródło