Bootstrap 3 Grid Layout mit kleineren Abständen als col-offset

[DotNet]

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:

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

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

<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.

[Nuebel]

<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?

[DMW007]

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

<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.