#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 + Multi-Zitat Zitieren
#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/ + Multi-Zitat Zitieren
#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ß + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren