Cum se proiectează rowspan folosind bootstrap div? (Programare, Twitter Bootstrap)

Mousam a intrebat.

Cum de a proiecta sistemul Grid cu bootstrap?

În afișajul mare și mediu va arăta 2 coloane și 3 rânduri. Prima coloană va avea 1 celulă și a doua coloană va avea 3 celule.

În afișarea mică și extra mică va arăta doar 1 coloană și 4 rânduri. Fiecare celulă se va suprapune una după alta într-o singură coloană. Prima coloană/celulă din afișajul mare sau mediu ar trebui să apară prima aici.

3 răspunsuri
Suganth G

Încercați acest lucru:

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>

Comentarii

  • Mulțumesc Jake745. Această soluție este exact ceea ce caut. –  > Por Mousam.
StrangeLove

Jake745 răspunsul este cumva corect, dar lipsește div-ul „row” pentru coloana imbricata. Nu poți avea o coloană fără un rând, așa că este bine să menții această structură. De asemenea, nu este nevoie să repetați coloana dacă ați cerut ca toate dimensiunile ecranului să fie răspândite la 12 sau la orice dimensiune. adică, dacă ați cerut ca mobilul să ocupe 12 coloane în timp ce tableta înainte ocupă 6 coloane, trebuie doar să puneți „col-xs-12 col-sm-6” și tot ceea ce depășește sm va ocupa întotdeauna 6 coloane în mod automat.

În acest fel, veți reduce codul și nu veți introduce coduri inutile. Sper să vă fie de ajutor.

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

Comentarii

  • Și eu am aceeași problemă rowspan în Bootstrap, însă conținutul meu este înfășurat într-un Kendo UI TabStrip widget. Nu reușesc să fac să funcționeze rowspan. Iată o mostră Plunker cu un conținut text în interiorul unui tabstrip Kendo – plnkr.co/edit/OE0VNbSkBHzmw1O4yLxC?p=preview –  > Por bob.mazzo.
  • col-sm-12 este, de asemenea, inutil –  > Por aProgger.
kelgwiin

puteți anina „rândurile”

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