1. #1
    Avatar von DotNet
    Registriert seit
    10.06.2015
    Beiträge
    661
    Thanked 316 Times in 185 Posts

    Standard 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>
    Ergebnis:


    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>
    Ergebnis:


    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>
    Das klappt leider nicht, weil Bootstrap die Breite prozentual recht eng berechnet. Die zweite Box passt somit nicht mehr in die Zeile und wird umgebrochen:



    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!

  2. #2
    Avatar von Nuebel
    Registriert seit
    23.11.2013
    Beiträge
    446
    Thanked 361 Times in 236 Posts

    Standard 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>
    Die Spalten in Bootstraps Gridlayout haben ein Padding. Reicht dir dieser Abstand?

  3. The Following User Says Thank You to Nuebel For This Useful Post:

    DotNet (17.04.2017)

  4. #3
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.080
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: 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>
    Ergebnis:


    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.


  5. The Following User Says Thank You to DMW007 For This Useful Post:

    DotNet (17.04.2017)

Ähnliche Themen

  1. Antworten: 21
    Letzter Beitrag: 07.06.2013, 19:23
  2. Verschenke Race Driver GRiD CD Key
    Von Polskaboii im Forum Verschenke
    Antworten: 0
    Letzter Beitrag: 26.11.2012, 05:33
  3. HTML5 + CSS3 - Blog Layout
    Von Snees im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.08.2012, 12:35
  4. [CSS] Problem mit Abständen
    Von exception im Forum Webentwicklung
    Antworten: 2
    Letzter Beitrag: 27.04.2012, 15:56
  5. Interesse an kleineren Gewinnspielen?
    Von Cube!X im Forum OffTopic
    Antworten: 3
    Letzter Beitrag: 13.01.2012, 03:00
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.