it-swarm.com.de

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

Ich bin sicher, dass es eine einfache Lösung für dieses Problem gibt. Grundsätzlich, wenn ich zwei Spalten habe, wie kann ich dann ein Leerzeichen dazwischen einfügen?

z.B. Wenn das HTML ist:

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

Die Ausgabe würde einfach zwei Spalten nebeneinander sein und die gesamte Seitenbreite einnehmen. Angenommen, die Breite wurde auf 1000px gesetzt, dann wäre jedes div 500px breit.

Wenn ich einen 100px-Raum zwischen den beiden wünschen würde, wie könnte ich das erreichen? Offensichtlich werden die Div-Größen automatisch durch Bootstrap 450px, um den Speicherplatz auszugleichen

164
Muhammed Bhikha

Sie können einen Abstand zwischen den Spalten mithilfe der col-md-offset-*-Klassen erreichen, die hier dokumentiert sind. Der Abstand ist konsistent, sodass alle Ihre Spalten richtig ausgerichtet sind. Um gleichmäßige Abstände und Spaltengrößen 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>
126
Ben

Ich stand vor demselben Problem. und folgendes funktionierte gut für mich. Hoffe das hilft jemand 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 2 Divs gerendert. 

enter image description here

285

Ich weiß, dass ich zu spät auf die Party komme, aber Sie könnten versuchen, die Boxen mit Polsterung zu beabstanden.

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

Probiere es aus

65
Robin Jonsson

Verwenden Sie die .form-group-Klasse von bootstrap. So in Ihrem Fall:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
11
S..

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

Ich habe eine Lösung gefunden, die zu unserem Problem passt und wahrscheinlich für die meisten Leute funktionieren wird, die versuchen, Spalten zu platzieren und die gleichen Rinnenbreiten wie der Rest des Gittersystems beizubehalten.

Dies war das Endergebnis, das wir uns vorgenommen hatten

 enter image description here

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, sodass 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 die Bootstrap-Klasse "row". Und dieses div, wir haben es "Hochblock" genannt, muss das direkte Geschwister einer Spalte sein

Auf diese Weise erhalten Sie immer noch eine korrekte Polsterung in Ihren Spalten. Ich habe Lösungen gesehen, die durch das Erstellen von Platz zu funktionieren scheinen, aber leider haben die von ihnen erstellten Spalten auf beiden Seiten der Reihe zusätzliche Auffüllungen, so dass die Reihe dünner wird, für die das Rasterlayout entworfen wurde. Wenn Sie das Bild nach dem gewünschten Aussehen betrachten, bedeutet dies, dass die beiden Spalten zusammen kleiner wären als die größere, die die natürliche Struktur des Gitters durchbricht.

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

10
Joe Fitzgibbons

Dies lässt ein Leerzeichen zwischen den beiden Spalten zu. Wenn Sie die Standardbreite ändern möchten, können Sie natürlich auch Mixins verwenden, um die Standardbreite des Bootstraps 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>
10
Amit

sie können Hintergrund-Clip und Box-Modell mit der Border-Eigenschaft 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>
9
Ali El Habchi

Sie können den Abstand zwischen den Spalten mithilfe der Klassen col-xs- * innerhalb eines unten codierten col-xs- * div erreichen. Der Abstand ist konsistent, sodass alle Ihre Spalten richtig ausgerichtet sind. Um gleichmäßige Abstände und Spaltengrößen 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>
8
User_3535

Bootstrap 4 , Datei custom.scss können 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;

4
Ivan Djordevic

Erstellen Sie im col-md-? Ein weiteres div und fügen Sie ein Bild in dieses div ein, als dass Sie das Auffüllen einfach so 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>
2
Farac

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

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 ändern zu können, musste das CSS die Breite von 30% in width:92.5%; unter @media (max-width:1023px) ändern.

2
Laser One Jim

Ich brauchte eine Spalte auf dem Handy und zwei Spalten ab Tablet-Porträt, mit gleichem Abstand zwischen ihnen in der Mitte (auch ohne zusätzliche Polsterung innerhalb der Spalten). Könnte mit Spacing-Dienstprogrammen erreicht werden und die Zahl in col-md weglassen:

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

1
drvictor666

Ich weiß, dass dieser Beitrag etwas veraltet ist, aber ich bin auf das gleiche Problem gestoßen. Beispiel für mein 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, überschreibe ich den Rand von -15px von Bootstrap in meiner site.css-Datei, indem ich den negativen Rand um 5 reduziere. 

Hier ist was ich getan habe ...

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

Ich hoffe, das hilft jemand anderem.

1
Mark Libner

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

0
Brian

Das 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 Rand in der rechten Seite des Felds vergrößern oder verkleinern möchten, bearbeiten Sie einfach die rechte Randeigenschaft des Listenelements.

Beispielausgabe 

 enter image description here

0
arulraj

Einfacher Weg

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

Dies ist standardmäßig so eingestellt, dass die Außendivision so aufgefüllt wird, wie es scheint. Darüber hinaus können Sie die Auffüllung auch mit benutzerdefiniertem CSS ändern.

0
Akshay R

Nur weißer Rand um das Wrap-Element

.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>
0
Jakub Stejskal

Um einen bestimmten Abstand zwischen den Spalten zu erhalten, müssen Sie padding im Standard-Layout von Bootstrap 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>

0
Gleb Kemarsky

Da Sie bootstrap verwenden, möchten Sie die Sache responsive erstellen. In diesem Fall sollten Sie keine festen Größen verwenden, zum Beispiel in 'px'.

Als Workaround für andere Lösungen schlage ich vor, beide Spalten "col-md-5" anstelle von "col-md-6" zu erstellen. Fügen Sie dann im übergeordneten Element "row", das die Spalten enthält, die Klasse "justify-content" hinzu -between ", wodurch sich der freie Speicherplatz in der Mitte befindet, da Sie im Bootstrap doc hier - nachsehen können. 

Diese Lösung ist auch für mehr als zwei Spalten gültig, wenn Sie "col-md-x" natürlich anpassen

ich hoffe es hilft ;)

0
Hugo
    <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;
}
0
RITHIN K

es ist ganz einfach .. Sie müssen einen festen Rand rechts hinzufügen, links von Farbe * 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;
}
0
Mohamed Ahmed

Bootstrap 4

Die Dokumentation sagt ( hier ):

Zeilen sind Wrapper für Spalten. Jede Spalte verfügt über eine horizontale Polsterung (als Rinne bezeichnet), 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: Setze den Abstand zwischen links und rechts von cols gleich minus dem Abstand zwischen links und rechts von row. 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 with custom spacing 

0
frouo

enter image description here

Bootstrap 4 - Spalten mit verschachtelten Zeilen trennen.

<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>
0
PHP75DJ

Entsprechend Bootstrap 4 Dokumentation sollten Sie dem Elternteil einen negativen Rand mx-n* und den Kindern einen positiven Abstand px-* geben.

<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>
0
estani