Bootstrap care combină rândurile (rowspan) (Programare, Twitter Bootstrap, Grilă Bootstrap)

Seong Lee a intrebat.

Testez Twitter Bootstrap și am rămas blocat cu scheletul de bază cu rânduri. Am revăzut documentația lor de mai multe ori și pot vedea coloane nesting în care, practic, puteți să aninați coloane în interiorul unei coloane, dar nu pot localiza capacitatea de a combina rândurile într-una singură și de a o alinia cu coloana de lângă rândurile necombinate.

Imaginea de mai jos ar trebui să ilustreze ceea ce vreau să realizez.

Singura soluție de rezolvare pe care am întâlnit-o este utilizarea tabelelor, dar nu-mi place această idee, deoarece, după părerea mea, capacitatea de reacție nu ar funcționa cu utilizarea tabelelor.

Are cineva vreo soluție elegantă în acest sens?Cea mai mare parte a aspectului web pe care îl voi face va avea nevoie de un nivel fin de flexibilitate, așa că ar fi minunat dacă aș putea obține ceva util aici.

6 răspunsuri
Paul Keister

Divs se stivuiesc vertical în mod implicit, deci nu este nevoie de o gestionare specială a „rândurilor” în cadrul unei coloane.

Ieșire:

Iată vioara.

Comentarii

  • Vă mulțumim foarte mult. Asta este ceea ce căutam! Aș fi vrut ca documentația Bootstrap să menționeze acest lucru în plus la rubrica de anvelopare a coloanelor, deoarece abordarea este practic aceeași. –  > Por Seong Lee.
  • în exemplul dvs. definiți 1row=25px, 2row=50px. puteți face ca div-ul extins să fie la fel de înalt ca întregul rând ? ați încercat să adăugați .row{height:100%;} dar nu a mers. –  > Por Tomer W.
  • Da, @carter exemplul original nu era conform cu bootstrap 3; l-am corectat. –  > Por Paul Keister.
  • Exemplul are jgheaburi pe al doilea rând, ceea ce arată ciudat. –  > Por Connie DeCinko.
Alcalyn

Ar trebui să folosiți anveloparea coloanelor bootstrap.

Consultați Bootstrap 3 sau Bootstrap 4:

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(În ecranul Fiddle, măriți ecranul de test pentru a vedea rezultatul, pentru că eu folosesc col.md-*, atunci responsive stivuiește coloanele)

Notă:: Nu sunt sigur că BS2 permite anidarea coloanelor, dar în răspunsul lui Paul Keister, nu se folosește nestingul de coloane. Ar trebui să o folosiți și să evitați să reinventeze css în timp ce bootstrap face bine.

Înălțimea coloanelor este automată, dacă adăugați o a doua linie (așa cum fac eu în exemplul meu), înălțimea coloanelor se adaptează singură.

Comentarii

  • Acesta ar trebui să fie răspunsul acceptat, deoarece funcționează cu Bootstrap din start și nu necesită nici o modificare CSS –  > Por cheenbabes.
  • Răspunsul acceptat este mai ușor de citit; conține un fragment de cod și un link către JSfiddle și, IMHO, exemplele lui Paul Keister sunt mai clare decât cele ale lui Alcalyn. De aceea, cred că răspunsul lui Paul Keister ar trebui păstrat ca răspuns acceptat, cel puțin până când răspunsul lui Alcalyn va fi îmbunătățit. –  > Por naXa.
  • @Alcalyn în browserul meu (Chrome), fiddle-ul legat din răspunsul tău nu produce rezultatul așteptat (vezi imaginea din întrebare). Rezultatul real este că toate div-urile sunt aliniate pe o coloană. –  > Por naXa.
  • Dacă vedeți o singură coloană cu toate div-urile aliniate, acest lucru se datorează faptului că -md- regula de răspuns. Trebuie să măriți ecranul pentru a vedea rezultatul așteptat. Dacă aveți nevoie ca deschiderile să fie afișate sub formă de coloane pe ecrane mai mici, înlocuiți -md- cu -sm- sau -xs-. Aceasta este o întrebare cu punct de întrerupere (Consultați bootstrapdocs.com/v3.0.3/docs/css/#grid). –  > Por Alcalyn.
pickypg

Notă: Acest lucru a fost pentru Bootstrap 2 (relevant atunci când a fost pusă întrebarea).

Puteți realiza acest lucru utilizând row-fluid pentru a face un rând bazat pe fluid (procentual) în interiorul unui rând existent block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Iată un exemplu JSFiddle.

Am observat că există o marjă stângă ciudată care apare (sau nu apare) pentru intervalele din interiorul row-fluid după primul. Acest lucru poate fi rezolvat cu o mică modificare CSS (este același CSS care se aplică primului copil, extins la cele de după primul copil):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Comentarii

  • Mulțumesc pentru efortul depus, dar se pare că un rând nu trebuie să folosească row-fluid pentru a realiza acest lucru, așa cum a sugerat răspunsul meu selectat. Apreciez foarte mult totuși! –  > Por Seong Lee.
  • Foarte adevărat, dar nu uitați row-fluid când vine momentul să începeți să subdivizați rândurile interioare. –  > Por pickypg.
Manish Sharma

Verificați aceasta. sper că vă va ajuta complet pentru dvs.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

vasavest

Răspunsul lui Paul pare să învingă scopul bootstrap; acela de a răspunde la dimensiunea viewport / ecran.

Prin cuibărirea rândurilor și coloanelor puteți obține același rezultat, păstrând în același timp capacitatea de răspuns.

Iată un răspuns actualizat la această problemă;

Puteți vizualizați codepen-ul aici.

SUDIP SINGH

Comentarii

  • Acest lucru nu funcționează pentru mine cu <div class=”col-sm-2″> <div class=”col-lg-4 col-md-4 col-sm-4 col-xs-4″ style=”background-color:yellow;”> <input type=”file” id=”imgInp” name=”img” accept=”.png, .jpg, .jpeg” > < <! — <input type=”text” src=”” class=”form-control” id=”imgName” size=”40″ ></input>–> <img id=”img-upload” src=”” alt=”Transporter” width=”300%” height=”50%” class=”rounded-circle” /> </div> </div> </div> </div> –  > Por SUDIP SINGH.
  • Vă rugăm să adăugați explicații în jurul codului dumneavoastră. Astfel încât OP și viitorii cititori să vă poată înțelege cu ușurință răspunsul. –  > Por Sangam Belose.