2014-06-05 13 views
5

Wäre es möglich, das beigefügte Grid im Bootstrap zu erreichen? Jedes der Quadrate wäre wahrscheinlich ein Bild ... oder vielleicht ein Text!Erzielen eines komplexen Gitters im Bootstrap

Ich habe versucht, aber eine Wand zu schlagen, wenn es um die obere linke Box zum Beispiel geht, die sich über zwei Reihen erstreckt.

Grid:

enter image description here

+0

Nun kann ich sehen, wie dies ohne Bootstraps erreichen, also denke ich, dass Sie es mit Bootstraps erreichen können. –

+0

Großartig @ web-tiki, was würdest du empfehlen? Danke – kingprawn123

+0

Ich würde nicht Bootstraps verwenden, aber das ist sehr persönlich (ich benutze es nicht und bin nicht sehr gern), aber wie Sie fragen ist "ist es möglich" Ich antworte "Ja" wie es möglich ist, ohne ist mit Bootsraps möglich. Wenn du keine Bootsraps benutzen willst, kann ich dir helfen, sonst kann ich nicht. Wie auch immer, viele Leute sollten hier in der Lage sein, eine Bootstrap-Lösung zu finden, also mach Dir keine Sorgen darüber. –

Antwort

10

Verwenden verschachtelten Blöcke, wenn Sie Ihre Gitter müssen mehrere Zeilen erstrecken. Etwas wie folgt aus:

<div class="row"> 
    <div class="col-sm-6"></div> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <div class="col-sm-6"></div> 
      <div class="col-sm-6"></div> 
     </div>   
     <div class="row"> 
      <div class="col-sm-6"></div> 
      <div class="col-sm-6"></div> 
     </div> 
    </div> 

    <div class="col-sm-8"> 
     <div class="row"> 
      <div class="col-sm-8"></div> 
      <div class="col-sm-4"></div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"></div> 
      <div class="col-sm-8"></div> 
     </div> 
    </div> 
    <div class="col-sm-4"></div> 
</div> 

Dann können Sie die Höhe für die Blöcke gesetzt und das Raster ist gut zu gehen.

+0

Vielen Dank @TwiStar, ich werde es versuchen! Zum Einstellen der Höhe der Blöcke empfehlen wir, eine neue .css-Datei in den css-Ordner einzufügen, der die Klasse 'row' liest? – kingprawn123

+0

Ich empfehle ein separates Stylesheet mit eigenen benutzerdefinierten Klassen, die diese Art von Dingen steuern. – Eternal1

+0

Perfekt, tut mir leid, dass ich so viele Fragen gestellt habe, aber wenn ich mir zum Beispiel die Box oben links ansehen würde, würde ich diese Box in ein div setzen und ihr eine benutzerdefinierte Klasse (Beispiel) geben "topleft"? Da das Gitter reagiert, ist es möglich, die Breite mit einer variablen Höhe zu spiegeln? Danke nochmal TwiStar. – kingprawn123

Verwandte Themen