Wie füge ich in Bootstrap einen Abstand zwischen Spalten hinzu?

201

Ich bin sicher, es gibt eine einfache Lösung für dieses Problem. Wenn ich zwei Spalten habe, wie kann ich dann ein Leerzeichen zwischen ihnen einfügen?

zB wenn das HTML ist:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

Die Ausgabe besteht einfach aus zwei Spalten direkt nebeneinander, die die gesamte Breite der Seite einnehmen. Angenommen, die Breite wurde so eingestellt, dass 1000pxjedes Div 500pxbreit ist.

Wenn ich einen 100pxRaum zwischen den beiden haben wollte, wie könnte ich das erreichen? Offensichtlich würden automatisch durch Bootstrap die Div-Größen 450pxjeweils werden, um den Platz zu kompensieren

Muhammed Bhikha
quelle

Antworten:

149

Mit den col-md-offset-*hier dokumentierten Klassen können Sie einen Abstand zwischen den Spalten erreichen . Der Abstand ist konsistent, sodass alle Spalten korrekt ausgerichtet sind. Um einen gleichmäßigen Abstand und eine gleichmäßige Spaltengröße zu erhalten, würde ich Folgendes tun:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

Verwenden Sie in Bootstrap 4: offset-2oderoffset-md-2

Ben
quelle
29
Das würde funktionieren, wenn ich mich an die Standardspaltengrößen halten möchte. Was ist, wenn ich eine bestimmte Abstandsgröße möchte, anstatt die Spalten zu versetzen?
Muhammed Bhikha
3
In diesem Fall würde ich empfehlen, die bereitgestellten Mixins zum Anpassen der Spaltenrinnen zu verwenden: getbootstrap.com/css/#grid-less - Bootstrap macht nicht das, was Sie in der Frage fragen, es kann die Gitterbreiten nicht "anpassen", um dies zu berücksichtigen zusätzlicher Abstand dazwischen, da er auf einem Pixelraster basiert.
Ben
2
George - Sie haben die Offset-Klassen dafür. Wenn Sie jedoch feststellen, dass die eingebauten Dachrinnen nicht ausreichen, können Sie versuchen, Ihre eigene Bootstrap-Version zu kompilieren, je nach Ihren Vorlieben entweder aus weniger oder weniger. Anschließend können Sie die Spaltenbreiten und Dachrinnen an Ihre Website anpassen. Das Hinzufügen leerer Divs ist jedoch nicht wirklich schlecht. Wichtig ist, dass Sie sich etwas einfallen lassen, das Sie (und / oder Ihr Team) konsequent verwenden können. Wenn Sie mit leeren Divs das erreichen, ist das in Ordnung. Denken Sie daran, dass Ihr Markup von Ihren Entwicklern gelesen werden soll, nicht von Ihren Endbenutzern.
Ben
23
Dieser Beitrag ist überhaupt keine Antwort, er schafft eine Lücke, die viel größer ist als gefragt.
Sebastien
2
In Bootstrap 4 ist dies Offset-MD-2 oder Offset-2
Mahesh
316

Ich stand vor dem gleichen Problem; und das Folgende hat bei mir gut funktioniert. Hoffe das hilft jemandem hier zu landen:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

Dadurch wird automatisch etwas Platz zwischen den beiden Divs gerendert.

Geben Sie hier die Bildbeschreibung ein

Utpal - Ur Bester Kumpel
quelle
hauptsächlich aufgrund von Rinnenbreiten.
Utpal - Ur Best Pal
13
"Rinnenbreiten" bezieht sich auf den Abstand in der Polsterung und den Rändern, der im Kern des Bootstrap-Rastersystems definiert ist. Kurz gesagt, das Hinzufügen eines zweiten Div mit col-xs-12ist dasselbe wie das Hinzufügen eines Div mitwidth:100%; padding:0px 15x;
mix3d
@ sixty4bit könnten Sie Ihren Code teilen; vielleicht kann ich Dir helfen.
Utpal - Ur Best Pal
das wäre toll @ Utpal-UrBestPal, danke! Hier ist ein Kern: gist.github.com/davidcpell/8d344ff18d5d188115c0ff9ba6ef7d14
Sixty4bit
2
Wenn Sie dieses Update verwenden und es nicht funktioniert, lesen Sie in der Erklärung von @ mix3d, warum es funktioniert, und Sie werden verstehen, was Sie falsch machen.
MauF
73

Ich weiß, dass ich zu spät zur Party komme, aber Sie könnten versuchen, die Kisten mit Polstern zu versehen.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

Probieren Sie es aus

Robin Jonsson
quelle
Nicht wirklich, weil Sie es nicht verwenden row-eq-heightkönnen
Greg Woz
13

Sie können Hintergrund-Clip und Box-Modell mit Rahmen-Proprety verwenden

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>
Ali El Habchi
quelle
13

Ich hatte ähnliche Probleme mit dem Abstand zwischen den Spalten. Das Hauptproblem besteht darin, dass Spalten in Bootstrap 3 und 4 anstelle des Randes Auffüllen verwenden. Hintergrundfarben für zwei benachbarte Spalten berühren sich also.

Ich habe eine Lösung gefunden, die zu unserem Problem passt und höchstwahrscheinlich für die meisten Menschen funktioniert, die versuchen, Säulen zu platzieren und die gleichen Rinnenbreiten wie der Rest des Rastersystems beizubehalten.

Dies war das Endergebnis, das wir anstrebten

Geben Sie hier die Bildbeschreibung ein

Es war problematisch, die Lücke mit einem Schlagschatten zwischen den Spalten zu haben. Wir wollten keinen zusätzlichen Platz zwischen den Spalten. Wir wollten nur, dass die Dachrinnen "transparent" sind, damit die Hintergrundfarbe der Site zwischen zwei weißen Spalten angezeigt wird.

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 erfordert ein inneres Div mit negativen Rändern, genau wie es der Bootstrap der "Zeilen" -Klasse verwendet. Und dieses Div, wir nannten es "Raised Block", muss das direkte Geschwister einer Säule sein

Auf diese Weise erhalten Sie immer noch die richtige Polsterung in Ihren Spalten. Ich habe Lösungen gesehen, die anscheinend funktionieren, indem sie Platz schaffen, aber leider haben die von ihnen erstellten Spalten auf beiden Seiten der Zeile einen zusätzlichen Abstand, sodass die Zeile, für die das Rasterlayout entworfen wurde, dünner wird. Wenn Sie das Bild für das gewünschte Aussehen betrachten, bedeutet dies, dass die beiden Spalten zusammen kleiner sind als die größere darüber, wodurch die natürliche Struktur des Gitters unterbrochen wird.

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

Joe Fitzgibbons
quelle
11

Dies ermöglicht einen Abstand zwischen den beiden Spalten. Wenn Sie die Standardbreite ändern möchten, können Sie natürlich Mixins verwenden, um die Standard-Bootstrap-Breite zu ändern. Sie können die Breite auch mithilfe des Inline-CSS-Stils angeben.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
Amit
quelle
4
Die Semantik davon ist nicht genau das, was @Muhammed fragt. Sie fügen eine Änderung in der Reihenfolge der Spalten mit Pull-Left, Pull-Right hinzu.
Luchux
9

Sie können den Abstand zwischen Spalten mithilfe der col-xs- * -Klassen in einem unten codierten col-xs- * div erreichen. Der Abstand ist konsistent, sodass alle Spalten korrekt ausgerichtet sind. Um einen gleichmäßigen Abstand und eine gleichmäßige Spaltengröße zu erhalten, würde ich Folgendes tun:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>
User_3535
quelle
6

Verwenden Sie die Bootstrap- .form-groupKlasse. So in Ihrem Fall:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
S ..
quelle
1
Wie kann ein Randboden hier nützlich sein?
Elisabeth
12
Ich habe mich absichtlich angemeldet, um diesen Hack nicht zu mögen.
Szdrnja
13
Ich habe mich absichtlich angemeldet, um Ihren Kommentar zur gezielten Anmeldung zu verbessern, nur um diesen Hack nicht zu mögen.
Adam Spiers
Ich habe mich absichtlich angemeldet, um Ihren Kommentar zur absichtlichen Anmeldung zu verbessern, nur um den Kommentar zur absichtlichen Anmeldung zu verbessern, um diesen Hack nicht zu mögen.
Black
4

Erstellen Sie innerhalb des col-md-? Ein anderes div und fügen Sie ein Bild in dieses div ein, als Sie einfach so eine Auffüllung hinzufügen können.

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>
Farac
quelle
4

Bootstrap 4 , Datei custom.scss Sie folgenden Code hinzufügen:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

Standardmäßig $ grid-gutter-width-base: 30px;

Ivan Djordevic
quelle
1
Könnten Sie es bitte näher erläutern? es funktioniert nicht für mich
Selva Ganapathi
2
@ SelvaGanapathi Sie müssen nach dem Ändern dieser Variablen neu kompilieren: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid
gbjbaanb
In Bootstrap 4 ist dies Offset-MD-2 oder Offset-2
Mahesh
4

Gemäß der Bootstrap 4- Dokumentation sollten Sie dem Elternteil einen negativen Rand mx-n*und den Kindern einen positiven Abstand gebenpx-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

estani
quelle
Was für mich am besten funktionierte (vertikaler Abstand zwischen den Reihen) war <div class="row mt-n4">und <div class="col-3 pt-4">.
Gavin
2

Ich musste für 3 Spalten herausfinden, wie das geht. Ich wollte die Ecken der Divs abrunden und konnte den Abstand nicht zum Laufen bringen. Ich habe Ränder verwendet. In meinem Fall habe ich angenommen, dass 90% des Bildschirms von den Divs und 10% von den Rändern ausgefüllt werden:

html:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

und CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

Um die Größe für mobile Geräte korrekt zu ändern, ließ ich das CSS die Breite von 30% auf width:92.5%;unter ändern@media (max-width:1023px)

Laser One Jim
quelle
2

Da Sie mit Bootstrap , ich denke , man die Sache machen wollen ansprechbar . In diesem Fall sollten Sie keine festen Größen verwenden, z. B. in 'px'.

Um dieses Problem zu umgehen, schlage ich vor, beide Spalten "col-md-5" anstelle von "col-md-6" zu erstellen und dann im übergeordneten Element "row", das die Spalten enthält, die Klasse "rechtfertigen-Inhalt" hinzuzufügen -between ", wodurch der freie Speicherplatz in die Mitte gestellt wird, wie Sie hier im Bootstrap-Dokument einchecken können

Diese Lösung gilt natürlich auch für mehr als zwei Spalten, in denen "col-md-x" angepasst wird

ich hoffe es hilft ;)

Hugo
quelle
1

es ist einfach .. du musst einen festen Rand rechts, links zu col- * hinzufügen und es sollte funktionieren .. :)

es sieht so aus: http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
Mohamed Ahmed
quelle
8
Wenn Sie nicht mehrere IDs auf derselben Seite verwenden, fehlt es Ihnen an Kenntnissen über die Verwendung von CSS. Verwenden Sie stattdessen Klassen.
LowFieldTheory
1

Ich weiß, dass dieser Beitrag etwas veraltet ist, aber ich bin auf dasselbe Problem gestoßen. Beispiel meines HTML.

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

Um Platz zwischen den Gruppen zu schaffen, habe ich den Bootstrap-Rand von -15px in meiner site.css-Datei überschrieben, indem ich den negativen Rand um 5 reduziert habe.

Folgendes habe ich getan ...

.form-group {
    margin-right: -10px;
}

Ich hoffe das hilft jemand anderem.

Mark Libner
quelle
1

Ich brauchte eine Spalte auf dem Handy und zwei Spalten vom Tablet-Porträt bis zum gleichen Abstand zwischen ihnen in der Mitte (auch ohne zusätzliche Raster in den Spalten). Könnte erreicht werden, indem Abstandsdienstprogramme verwendet werden und die Nummer in weggelassen wird col-md:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>
drvictor666
quelle
0

Wie wäre es, wenn Sie mit CSS einen Rahmen hinzufügen, der dieselbe Farbe wie der Hintergrund hat? Ich bin neu in diesem Bereich, also gibt es vielleicht einen guten Grund, dies nicht zu tun, aber es sah gut aus, als ich es versuchte.

Brian
quelle
5
Willkommen beim Stapelüberlauf. Wenn Sie weitere Informationen oder Erläuterungen zu einer Frage benötigen, verwenden Sie bitte Kommentare anstelle von Antworten.
β.εηοιτ.βε
Wenn der Hintergrund ein Bild / eine Textur anstelle von Volltonfarben verwenden würde, wäre dies offensichtlich.
Charles Watson
0

Um eine bestimmte Breite des Abstands zwischen den Spalten zu erhalten, müssen wir paddingdas Standard-Bootstrap-Layout einrichten .

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}
<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

Gleb Kemarsky
quelle
0

Dies wird nützlich sein ..

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }
<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

Wenn Sie den weiteren Rand auf der rechten Seite des Felds vergrößern oder verkleinern möchten, bearbeiten Sie einfach die Eigenschaft für den Rand rechts des Listenelements.

Beispielausgabe

Geben Sie hier die Bildbeschreibung ein

Arulraj
quelle
0

Nur weißer Rand um das Wickelelement

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

und erstes + letztes Kind keine Grenze

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>
Jakub Stejskal
quelle
0
    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}
RITHIN K.
quelle
2
Ein bisschen Prosa darüber, was und warum hilfreich sein könnte.
Uwe Allner
0
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

Dies bietet standardmäßig eine gewisse Polsterung innerhalb des äußeren Bereichs, wie Sie es anscheinend benötigen. Darüber hinaus können Sie die Auffüllung auch mit benutzerdefiniertem CSS ändern.

Akshay R.
quelle
0

Einfacher Weg

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
Vladislav Koshenevskiy
quelle
0

Bootstrap 4

Dokumentation sagt ( hier ):

Zeilen sind Wrapper für Spalten. Jede Säule hat eine horizontale Polsterung (Rinne genannt), um den Abstand zwischen ihnen zu steuern. Diesem Auffüllen wird dann in den Zeilen mit negativen Rändern entgegengewirkt. Auf diese Weise wird der gesamte Inhalt Ihrer Spalten auf der linken Seite visuell ausgerichtet.

Die richtige Antwort lautet also: Setzen Sie cols 'Auffüllen links / rechts gleich minus Ihren rowRand links / rechts. So einfach.

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

Demo: https://codepen.io/frouo/pen/OqGaWN

col mit benutzerdefiniertem Abstand

frouo
quelle
0

Geben Sie hier die Bildbeschreibung ein

Bootstrap 4 - Trennen Sie Spalten mithilfe verschachtelter Zeilen.

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

quelle
Vielleicht ist die Verwendung der Antwort von @estani eine "klassischere" Möglichkeit, dies mit bootstrap4 zu tun?
Sodimel
0

Erstellen Sie eine Klasse und verwenden Sie:

Rand: 1,5 em .5em; max-width: calc (50% - 1em)! wichtig;

Wobei 1em auf der maximalen Breite gleich dem linken / rechten Rand ist, der addiert wird.

WebDude0482
quelle
-1

Dies ist auch eine Möglichkeit, es und seine Werke zu tun. Bitte überprüfen Sie die folgende URL https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>
Sarfaraz Kasmani
quelle
-2

Die Verwendung von Rand-Links ist der richtige Weg:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

funktioniert perfekt

Alanh
quelle
Nein, es bricht nicht die Reaktionsfähigkeit.
Crasher
-2

Mit der neuesten Bootstrap-Version können Sie "Karten" verwenden.

VFB
quelle
Ihre Antwort bedarf weiterer Erläuterungen. Weitere
Informationen finden