DotNet (17.04.2017)
-
01.04.2017, 14:25 #1
Bootstrap 3 Grid Layout mit kleineren Abständen als col-offset
Ich baue mithilfe von Bootstrap 3.3 eine kleine Webanwendung auf. Aktuell möchte ich mehrere Spalten erstellen, dafür kommt das Grid-Layout zum Einsatz. Ich finde das sehr praktisch, habe aber nun ein Problem: Es sollen zwei Spalten nebeneinander erstellt werden, wobei die erste deutlich mehr Inhalt hat und daher ungefähr doppelt so groß werden soll, wie die Zweite.
Dank des Grid-Layouts recht simpel:
HTML-Code:<div class="col-lg-8" style="background-color:red;height:20px"></div> <div class="col-lg-4" style="background-color:blue;height:20px"></div>
Prinzipiell passt das. Nur möchte ich aus optischen Gründen gerne Abstand zwischen beiden Boxen. Nicht zuletzt auch deswegen, weil das fertige Design aufgehübscht wird mit leicht abgerundeten Ecken und Box-Schatten, die man zwischen den Boxen so gar nicht sehen würde. Bootstrap hat ja auch daran gedacht und die col-*-offset-* Klassen dafür bereitgestellt. Ich könnte somit die zweite Box etwas kleiner machen und ein Offset hinzufügen:
HTML-Code:<div class="col-lg-8" style="background-color:red;height:20px"></div><div class="col-lg-3 col-lg-offset-1" style="background-color:blue;height:20px"></div>
Schon besser. Jedoch ist der Abstand zu groß, vor allem auf größeren Bildschirmen. Ich möchte die Boxen ja nur optisch voneinander abheben. So 10 Pixel wären schon völlig ausreichend. Den restlichen Platz würde ich lieber in die rechte Box investieren, da diese mit 3 Spalten doch etwas klein ist. Die Idee war, einfach kein Offset zu verwenden, und stattdessen manuell 10px Margin einzufügen:
HTML-Code:<div class="col-lg-8" style="background-color:red;height:20px"></div><div class="col-lg-4" style="background-color:blue;height:20px;margin-left:10px"></div>
Gibt es seitens Bootstrap eine Best Practice Lösung für dieses Problem? Um das noch mal kurz zusammenzufassen: Ich würde gerne col-lg-8 und col-lg-4 nebeneinander Platzieren, mit einem kleinen Abstand von höchstens 10 Pixeln dazwischen, ohne dass mir die umgebrochen werden. Letztendlich suche ich also etwas wie col-lg-offset-0.2 oder ähnlich, aber die Klasse gibt es nicht. col-lg-offset-1 ist die Kleinste, und die macht mir zu viel Abstand.
Im Krieg gibt es keine Gewinner, nur Verlierer!
-
01.04.2017, 21:14 #2
AW: Bootstrap 3 Grid Layout mit kleineren Abständen als col-offset
HTML-Code:<div class="container"> <div class="row"> <div class="col-lg-8" style="background-color:red;height:40px"> </div> <div class="col-lg-4" style="background-color:blue;height:40px"> <div style="background-color: green; height: 20px"> </div> </div> </div> </div>
Geändert von U-Labs (24.06.2024 um 16:50 Uhr) Grund: Abload.de Bilder wegen geplanter Abschaltung auf U-IMG übertragen
-
The Following User Says Thank You to Nuebel For This Useful Post:
-
17.04.2017, 13:37 #3
- Registriert seit
- 15.11.2011
- Beiträge
- 7.790
- Blog Entries
- 5
Thanked 9.345 Times in 3.188 PostsAW: Bootstrap 3 Grid Layout mit kleineren Abständen als col-offset
Du kannst dir auch einfach zunutze machen, dass die Grid-Spalten einen durch Bootstrap definierten Innenabstand aufweisen. Dazu definierst du innerhalb der Spalten noch mal einen Container, der auf die volle Breite geht (z.B. col-lg-12):
HTML-Code:<div class="row"> <div class="col-lg-6"> <div class="col-lg-12" style="background-color:red;height:20px"></div> </div> <div class="col-lg-6"> <div class="col-lg-12" style="background-color:blue;height:20px"></div> </div> </div>
Zugegeben, die extra Verschachtelungen sind nicht gerade zu bejubeln - Zumal man mit Bootstrap recht schnell eine div-Suppe zustande bringt. Der klare Vorteil ist allerdings, dass man keine händischen CSS Änderungen bzw. Erweiterungen benötigt, sondern direkt mit den Boardmitteln des CSS-Frameworks arbeitet. Und die Dimensionen sind dadurch immer konsistent. Für einen spezifischen Abstand wäre diese Lösung möglicherweise suboptimal. Aber wenn es nur darum geht, einen kleinen sichtbaren Abstand zueinander schaffen um Controls optisch voneinander zu trennen, halte ich das für sinnvoll.
-
The Following User Says Thank You to DMW007 For This Useful Post:
DotNet (17.04.2017)
Ähnliche Themen
-
Layout - Gleicher Spaltenabstand in Tabelle
Von Saad im Forum CSSAntworten: 21Letzter Beitrag: 07.06.2013, 19:23 -
Verschenke Race Driver GRiD CD Key
Von Polskaboii im Forum VerschenkeAntworten: 0Letzter Beitrag: 26.11.2012, 05:33 -
HTML5 + CSS3 - Blog Layout
Von Snees im Forum HTMLAntworten: 0Letzter Beitrag: 17.08.2012, 12:35 -
[CSS] Problem mit Abständen
Von exception im Forum WebentwicklungAntworten: 2Letzter Beitrag: 27.04.2012, 15:56 -
Interesse an kleineren Gewinnspielen?
Von Cube!X im Forum OffTopicAntworten: 3Letzter Beitrag: 13.01.2012, 03:00
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.