• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bootstrap Frage

T

Tronjer

Senior HTML'ler
Ich habe gerade den Tunnelblick. :(

Folgendes Bootstrap Problem:
Ich unterteile eine Seite in 9 columns für main und 3 columns für aside. Anschließend wird main nochmal in 2 Divs mit je 6 columns unterteilt. S,o dass ich 3 sichtbare Container auf der Seite habe. Jeder sichtbare Container soll einen grauen Background und den gleichen Abstand zu seinem Nachbarn haben.

Dafür muss es doch irgendwelche Helper Classes oder zumindest einen vernünftigen Ansatz geben.

JSFiddle: http://jsfiddle.net/vx62efwc/2/

HTML: 
/* CSS
.background {background-color: #ddd;}
*/
<div class="container">
    <div class="row">
      <main class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="background">Lore ipsum col-6.</div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="background">Lore ipsum col-6.</div>
        </div>
      </main>
      <aside class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        <div class="background">Lore ipsum col-3</div>
      </aside>
    </div>
  </div>
 
Werbung:
Hallo,

kann man die 9 columns überhaupt in 2 mal 6 columns unterteilen? Irgendwie meine ich in schwacher Erinnerung zu haben, das eine Unterteilung nur wieder 9 colums ergeben kann.

Gruss

MrMurphy
 
Ich hoffe es doch stark. Die Vorlage des Grafikdesigner hat 3 Container, von denen die ersten beiden etwa doppelt so breit sind wie der dritte. Also bsw. 500px + 500px + 250px. Das ist ein Verhältnis von 2 : 2 : 1 und ließe sich in 5 oder 10 Spalten aufteilen. Ich muss das aber irgendwie auf 12 bringen.

Irgendwie bedeutet in diesem Fall, dass ich leider nicht viel Zeit habe, andere Frameworks zu evaluieren. Ich muss morgen was mit semantisch sauberem und möglichst minimalem Code abliefern.
 
Werbung:
http://jsfiddle.net/em4w7uuc/ so?

HTML: 
<div class="container">
    <div class="row">
      <main class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
          <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="background">Lore ipsum col-6.</div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="background">Lore ipsum col-6.</div>
        </div>
          </div>
      </main>
      <aside class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        <div class="background">Lore ipsum col-3</div>
      </aside>
    </div>
  </div>
 
Danke dir. Das mit der zweiten .row habe ich gestern nicht mehr geblickt.

Nebenbei bemerkt kann man in Bootstrap schon eine beliebige Spaltenzahl wieder in 12 Columns unterteilen, sofern diese Zahl nicht zu klein ist. Damit lassen sich auch Designs verarbeiten, die der Grafiker optisch auf 4 oder 5 Spalten angelegt hat.

Das funktioniert sogar dann, wenn die Container unterschiedlich hoch sind und in der Höhe direkt aneinanderstoßen sollen. Dafür lässt sich Bootstrap mit Libraries wie Isotope und Masonry kombinieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben