Jak zaprojektować rowspan za pomocą bootstrap div?

Question

Jak zaprojektować system sieci z bootstrapem?

Na dużym i średnim wyświetlaczu pokaże 2 kolumny i 3 rzędy. Pierwsza kolumna będzie miała 1 komórkę, a druga będzie miała 3 komórki.

Na małym i bardzo małym wyświetlaczu wyświetli tylko 1 kolumnę i 4 rzędy. Każda komórka będzie układać się jeden po drugim w jednej kolumnie. Pierwsza kolumna/komórka z dużego lub średniego ekranu powinna być tutaj pierwsza.

Answer 1

Spróbuj tego:

DEMO

 <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        First Column, First Cell 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, First Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Second Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Third Cell 
       </div> 
      </div> 
     </div> 

Answer 2

można zagnieździć się "wiersze"

<div class = "row"> 
    <!-- first column--> 
    <div class = "col-lg-12"> 
    ...your code here 
    </div> 

    <!-- second column--> 
    <div class = "col-lg-12"> 
     <div class = "row"> 
      <div class = "col-lg-6"> 
      .. your code cell 1 
      </div> 

      <div class = "col-lg-6"> 
      .. your code cell 2 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

Jake745 odpowiedź jest prawo w jakiś sposób jednak pominąć ten "rząd" div dla kolumny zagnieżdżonego . Nie możesz mieć kolumny bez rzędu, więc dobrze jest zachować tę strukturę. Nie musisz też powtarzać kolumny, jeśli chcesz, aby cały rozmiar ekranu był rozłożony na 12 lub dowolny rozmiar. tj. jeśli potrzebujesz telefonu komórkowego, aby zająć 12 kolumn, a tablet dalej, zajmij 6 kolumn, wystarczy umieścić "col-xs-12 col-sm-6", a wszystko powyżej sm zawsze będzie automatycznie pobierać 6 kolumn.

W ten sposób zredukujesz swój kod i nie wprowadzisz niepotrzebnych kodów. Mam nadzieję, że to pomoże.

<div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
       First Column, First Cell 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
      <div class="row"> 
       <div class="col-xs-12"> 
       Second Column, First Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Second Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Third Cell 
       </div> 
      </div> 
     </div> 
    </div>