Wie mit Bootstrap 3 Spalten zu tun haben keine Lücke?

Question

Ich habe Probleme mit dem neuen Bootstrap 3-Grid-System. Ich möchte 4 Spaltengitter erstellen. Also hier ist mein Code:

Mein Problem ist, es gibt keine Lücke zwischen den Spalten. Grid wendet Padding-left und Padding-right auf Spalten anstelle von margin-left und margin-right an.

Wenn ich Padding entferne und Rand hinzufüge, bricht es zusammen. Wie soll ich das reparieren? oder Gibt es etwas, das ich nicht verstehen konnte?

Answer 1

Wenn Sie das Standard-Padding nicht verwenden können, um Lücken zu erstellen, müssen Sie `margin-left 'zu den entsprechenden Spalten hinzufügen und auch die% width anpassen.

Zum Beispiel .col-lg-4 hat in der Regel 33% Breite, so dass Sie würde es ein wenig verringern ..

.col-lg-4 { 
    margin-left:15px; 
    width:31.6%; 
} 

http://bootply.com/74374

Eine andere Möglichkeit wäre, einen Container in den Spalten zu verwenden, und dann die Padding funktioniert, um die Lücken zu erstellen.

Answer 2

für genauere Spaltenbreite können Sie die Verwendung css3 calc() operator

.col-lg-4 { 
    margin-left:15px; 
    width:31.6%; /* non-css3 fallback */ 
    width: calc(33.33333333% - 15px); /* css3 calculation */ 
} 

Answer 3

Sie müssen diese Zeile in einen .Behälter DIV enthalten. Ansonsten versteht Bootstrap, dass zwischen den Spalten keine Lücken sein sollten.

Answer 4

Ich postete diese here bereits, aber es ist immer noch relevant für die ursprüngliche Frage und bietet weitere Informationen darüber, wie dieser Ansatz funktioniert.

Ich hatte ähnliche Probleme mit dem Abstand zwischen den Spalten. Das Hauptproblem besteht darin, dass Spalten in Bootstrap 3 und 4 Padding statt Rand verwenden. So berühren sich Hintergrundfarben für zwei benachbarte Spalten.

Ich fand eine Lösung, die zu unserem Problem passt und höchstwahrscheinlich für die meisten Leute funktionieren wird, die versuchen, Spalten zu säubern und die gleichen Stegbreiten wie der Rest des Rastersystems beizubehalten.

Dies war das Ergebnis wir für

Nachdem die Lücke mit einem Schlagschatten zwischen den Säulen problematisch war gingen. Wir wollten keinen zusätzlichen Abstand zwischen den Spalten. Wir wollten nur, dass die Dachrinnen "transparent" sind, so dass die Hintergrundfarbe der Website zwischen zwei weißen Säulen erscheint.

dies ist das Markup für die beiden Spalten

<div class="row"> 
    <div class="col-sm-7"> 
     <div class="raised-block"> 
      <h3>Facebook</h3> 
     </div> 
    </div> 
    <div class="col-sm-5"> 
     <div class="raised-block"> 
      <h3>Tweets</h3> 
     </div> 
    </div> 
</div> 

CSS

.raised-block { 
    background-color: #fff; 
    margin-bottom: 10px; 
    margin-left: 0; 
    margin-right: -0.625rem; // for us 0.625rem == 10px 
    padding-left: 0.625rem; 
    padding-right: 0.625rem; 
} 
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack 
    .raised-block { 
     margin-left: -0.625rem; 
    } 
} 
.row [class^="col-"]:first-child>.raised-block { 
    // this is so the first column has no margin so it will not be "indented" 
    margin-left: -0.625rem; 
} 

Dieser Ansatz hat eine innere div mit negativen Margen erfordern ebenso wie die "Reihe" Klasse Bootstrap-Anwendungen. Und dieses div, wir nannten es "raised-block", muss das direkte Geschwister einer Spalte sein

Auf diese Weise erhalten Sie immer noch richtige Polsterung in Ihren Spalten.Ich habe Lösungen gesehen, die anscheinend funktionieren, indem ich Platz erschaffe, aber leider haben die Spalten, die sie erzeugen, extra Polsterung auf jeder Seite der Reihe, so dass die Reihe dünner wird, als das Gitter-Layout entworfen wurde. Wenn Sie das Bild für das gewünschte Aussehen betrachten, würde dies bedeuten, dass die zwei Spalten zusammen kleiner als die eine größere oben sind, die die natürliche Struktur des Gitters bricht.

Der Hauptnachteil dieses Ansatzes besteht darin, dass zusätzliche Markierungen erforderlich sind, die den Inhalt jeder Spalte umschließen. Für uns funktioniert das, weil nur bestimmte Spalten Platz zwischen ihnen benötigten, um das gewünschte Aussehen zu erreichen.

Hoffe, das hilft