Erstellen Sie eine benutzerdefinierte Lücke zwischen zwei Bootstrap-Spalten

Sie könnten eine Klasse hinzufügen, die die Breite von col-md-6 ändert. Die Breite dieser Klasse ist auf 50% festgelegt. Eine kleinere Lücke wird erreicht, indem die Breite wie folgt verringert wird:

Fügen Sie dies Ihren div-Elementen hinzu. Auf diese Weise wird die Breitenregel von col-md-6 überschrieben.

Sie können ein anderes div-Element verwenden und dafür eine Auffüllung bereitstellen.

Ich habe diese hier bereits gepostet, aber es ist immer noch relevant die ursprüngliche Frage.

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 habe eine Lösung gefunden, 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 Gittersystems beizubehalten.

Das war das Endergebnis, für das wir uns entschieden haben

Die Lücke mit einem Schlagschatten zwischen den Spalten war problematisch. 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 Spalten erscheint.

Dies ist das Markup für die zwei Spalten

CSS

Dieser Ansatz erfordert ein inneres div mit negativen Rändern genau wie der Bootstrap der "row" Klasse. Und dieses div, wir nannten es "erhobenen Block", muss das direkte Geschwister einer Spalte sein

Auf diese Weise erhalten Sie immer noch die richtige Füllung 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 man sich das Bild für das gewünschte Aussehen ansieht, würde dies bedeuten, dass die beiden Spalten zusammen kleiner sind als die obere, die die natürliche Struktur des Rasters durchbricht.

Der Hauptnachteil dieses Ansatzes besteht darin, dass ein zusätzliches Markup erforderlich ist, das den Inhalt jeder Spalte umschließt. Für uns funktioniert das, weil nur bestimmte Spalten Platz zwischen ihnen benötigen, um das gewünschte Aussehen zu erreichen.

Hoffe das hilft

Hier ist eine weitere Möglichkeit:
Live-Ansicht
Bearbeiten Sie die Ansicht

Sie werden sehen, dass es 2 col-md-6 verwendet, jedes mit einem verschachtelten col-md-11, und Sie positionieren die verschachtelte Zeile im zweiten div nach rechts.

Der Vorschlag von Ken hat sauberes HTML, das ich mag. Wenn Ihr linkes und rechtes Panel Elemente verwendet, deren Breite jedoch durch Bootstrap definiert wurde (z. B. Vertiefungen oder Formularelemente), könnte der Spaltenabstand zu Problemen führen und das Layout beschädigen. Dieser verschachtelte Ansatz könnte in dieser Situation einfacher sein.

HTML

Viel Glück!