Bootstrap 3 Grid Positionierung

Dieses Thema im Forum "Webdesign" wurde erstellt von DeltaFox, 14. Februar 2014 .

  1. 14. Februar 2014
    Hallo,
    nachdem ich den Post von elf4 gelesen habe, wollte ich mich auch einmal mit der Bootstrap 3 auseinander setzen und ein kleines Grid für eine Gallerie machen.

    Nun bin ich aber auf ein paar Probleme gestoßen:

    Ich habe mit
    PHP:
    < div  class= "row" >
    <
    div  class= "col-md-2" >
    Bild oder Button
    </ div >
    </
    div >
    Ein Reihe mit Spalten erstellt. Nun möchte ich aber das die Reihe immer 1024px breit ist. Wie lässt sich sowas am besten bei der Bootstrap umsetzten? Weil eine neue Klasse anlegen mit 1024 und zu row hinzufügen hat nicht geklappt.

    Ein weiteres Problem ist ich habe auch noch Buttons, diese möchte ich gerne am unteren Rand haben und nicht am oberen. Ich hab schon ein paar Sachen dazu über Google gefunden, aber diese haben alle nicht funktioniert. Gibts eine einfach Lösung zur Positionierung von Elementen innerhalb des Grids?

    Vielen Dank schonmal
     
  2. 14. Februar 2014
    AW: Bootstrap 3 Grid Positionierung

    Bin jetzt kein Programmierer (sondern Mediengestalter) aber ich würde diesen Weg gehen.

    Als erstes würde ich ein Media Query initialisieren das die Größen jenseits der 1024x768 abfängt und im Container auf 100% skaliert:

    Code:
    @media (min-width: 1024px) {
     .container {
     width: 100%
    }
    Als nächstes würde ich einen globalen Container im Form eines Wrappers definieren der die Seite mittig ausrichtet und dann auf 1024 Breite skaliert. Durch den zuvor gesetzten Media Query behält der Container von Bootstrap sein responsive Verhalten bis zu einer maximalen Breite von 1024 Pixeln.

    Code:
    .wrapper{ 
     max-width: 1024px; /* Inhalt wird auf 1024 Skalliert */
     margin: 0 auto /* Positioniert die Seite Mittig */
    }
    Bei deinen zweiten Problem würde ich einfach die Helper Klasse Pager heranziehen um die Button Gruppe mittig zu positionieren.

    Code:
     <section class="pager">
     <div class="btn-group">
     <button type="button" class="btn btn-default">1</button>
     <button type="button" class="btn btn-default">2</button>
     <button type="button" class="btn btn-default">3</button>
     <button type="button" class="btn btn-default">4</button>
     </div>
     </section> 
    
    Hier das komplette css:

    Code:
    @media (min-width: 1024px) {
     .container {
     width: 100%
    }
    }
    .wrapper{ 
     max-width: 1024px; /* Inhalt wird auf 1024 Skalliert */
     margin: 0 auto /* Positioniert die Seite Mittig */
    } 
    
    header p,
    sektion p{
     padding:15px;
    }
    das komplette html:

    Code:
    <body>
     <div class="clearfix wrapper"> 
     
     <header class="bg-primary">
     <p>Bootstrap 3 Grid Positionierung</p>
     </header>
    
     <section> 
     <div class="container">
     <div class="row">
     <div class="col-xs-3 col-sm-2">
     <ul>
     <li>Home</li>
     <li>About</li>
     <li>Contact</li>
     </ul> 
     </div>
     <div class="col-xs-9 col-sm-10">
     <p>...</p>
     </div> 
     </div>
     </div>
     </section>
     
     <section class="pager">
     <div class="btn-group">
     <button type="button" class="btn btn-default">1</button>
     <button type="button" class="btn btn-default">2</button>
     <button type="button" class="btn btn-default">3</button>
     <button type="button" class="btn btn-default">4</button>
     </div>
     </section> 
     
     </div>
    </body>
    Demo: Bootstrap 3 - JSFiddle
    Responsive Preview:
    Responsinator
    - jsfiddle.net/m/xtw/
     
  3. 23. Februar 2014
    AW: Bootstrap 3 Grid Positionierung

    Da ich erst jetzt dazugekommen bin es auszuprobieren, antworte ich erst jetzt so spät Danke es funktioniert super!
    Jetzt weiß ich auch wo mein Fehler lag.

    Gruß
     
  4. 2. April 2014
    AW: Bootstrap 3 Grid Positionierung

    So ich frag hier einfach mal in meinem alten Thread. Ich hatte nun ewig keine Zeit mehr mich weiter mit Bootstrap auseinander zusetzen. Nun wollte ich aber den Container welcher 1024px breit ist mit col-md-* füllen so dass diese insgesamt auch genau 1024 breit sind.
    Also habe ich einfach mal ein div mit class row erstellt und dieses mit col-md-2 gefüllt nun sprengen diese aber jedesmal die 1024px.

    Wie kann man sowas bei Bootstrap am besten lösen?

    Danke
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.