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

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

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.

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

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>

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

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.

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>

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>

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>

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>

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;

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>

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)

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

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;
}

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.

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>

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.

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>

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

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>

    <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;
}

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

Einfacher Weg

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

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

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>

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.

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>

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

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