Come faccio ad aggiungere la spaziatura tra le colonne in Bootstrap?


202

Sono sicuro che esiste una soluzione semplice a questo problema. Fondamentalmente, se ho due colonne come posso aggiungere uno spazio tra loro?

ad esempio se l'html è:

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

L'output sarebbe semplicemente due colonne l'una accanto all'altra occupando l'intera larghezza della pagina. Supponiamo che la larghezza sia stata impostata su 1000pxquindi ogni div sarebbe 500pxampio.

Se avessi voluto uno 100pxspazio tra i due come avrei potuto farlo? Ovviamente automaticamente tramite bootstrap le dimensioni div diverrebbero 450pxciascuna per compensare lo spazio

Risposte:


149

Puoi ottenere la spaziatura tra le colonne usando le col-md-offset-*classi, documentate qui . La spaziatura è coerente in modo che tutte le colonne siano allineate correttamente. Per ottenere una spaziatura uniforme e le dimensioni della colonna, farei quanto segue:

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

In Bootstrap 4 usare: offset-2ooffset-md-2


29
che funzionerebbe quando voglio attenermi alle dimensioni di colonna predefinite, cosa succede se desidero una dimensione specifica della spaziatura, anziché compensare le colonne?
Muhammed Bhikha,

3
In questo caso, consiglierei di utilizzare i mixin forniti per regolare le grondaie: getbootstrap.com/css/#grid-less - Bootstrap non fa ciò che chiedi nella domanda, non può "regolare" le larghezze della griglia per tenere conto spazio aggiuntivo tra perché basato su una griglia di pixel.
Ben

2
George - hai le classi di offset per questo. Ma se trovi le grondaie integrate insufficienti, potresti provare a compilare la tua versione di bootstrap, da meno o meno a seconda delle tue preferenze. È quindi possibile modificare le larghezze delle colonne e le grondaie affinché corrispondano al sito Web. L'aggiunta di div vuoti non è poi così male, l'importante è trovare qualcosa che tu (e / o il tuo team) potete usare in modo coerente; se divs vuoti è il modo in cui lo raggiungi, allora va bene; ricorda che il tuo markup deve essere letto dai tuoi sviluppatori, non dai tuoi utenti finali.
Ben

24
Questo post non è affatto una risposta, crea un gap molto più grande di quanto richiesto.
Sebastien,

2
In Bootstrap 4, questo è offset-md-2 o offset-2
Mahesh il

318

Stavo affrontando lo stesso problema; e quanto segue ha funzionato bene per me. Spero che questo aiuti qualcuno che atterra qui:

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

Ciò renderà automaticamente dello spazio tra le 2 div.

inserisci qui la descrizione dell'immagine


principalmente a causa della larghezza della grondaia.
Utpal - Ur Best Pal,

14
"larghezze della grondaia" si riferisce alla spaziatura nell'imbottitura e ai margini definiti nel nucleo del sistema a griglia del bootstrap. In breve, aggiungere un secondo div con col-xs-12width:100%; padding:0px 15x;
equivale

@ sixty4bit potresti condividere il tuo codice; forse posso aiutarti.
Utpal - Ur Best Pal

sarebbe fantastico @ Utpal-UrBestPal, grazie! ecco un riassunto
sixty4bit

2
Se stai usando questa correzione e non funziona, leggi perché funziona nella spiegazione di @ mix3d e capirai cosa stai facendo di sbagliato.
MauF,

73

So che sono in ritardo alla festa, ma potresti provare a spaziare le scatole con l'imbottitura.

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

Provaci


Non proprio, perché non è possibile utilizzare row-eq-heightcon esso
Greg Woz

13

puoi usare la clip di sfondo e il modello box con la proprietà del bordo

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

13

Ho avuto problemi simili con lo spazio tra le colonne. Il problema alla radice è che le colonne in bootstrap 3 e 4 usano il padding invece del margine. Quindi i colori di sfondo per due colonne adiacenti si toccano.

Ho trovato una soluzione adatta al nostro problema e molto probabilmente funzionerà per la maggior parte delle persone che cercano di spaziare le colonne e mantenere le stesse larghezze di grondaia del resto del sistema a griglia.

Questo era il risultato finale che stavamo cercando

inserisci qui la descrizione dell'immagine

Avere il divario con un'ombra discendente tra le colonne era problematico. Non volevamo più spazio tra le colonne. Volevamo solo che le grondaie fossero "trasparenti" in modo che il colore di sfondo del sito apparisse tra due colonne bianche.

questo è il markup per le due colonne

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

Questo approccio richiede un div interno con margini negativi proprio come usa il bootstrap della classe "row". E questo div, lo abbiamo chiamato "blocco rialzato", deve essere il fratello diretto di una colonna

In questo modo si ottiene ancora un'imbottitura adeguata all'interno delle colonne. Ho visto soluzioni che sembrano funzionare creando spazio, ma sfortunatamente le colonne che creano hanno un'imbottitura extra su entrambi i lati della riga, quindi finisce per rendere la riga più sottile per cui è stato progettato il layout della griglia. Se guardi l'immagine per l'aspetto desiderato, ciò significherebbe che le due colonne insieme sarebbero più piccole di quella più grande in cima che rompe la struttura naturale della griglia.

Il principale svantaggio di questo approccio è che richiede un markup aggiuntivo che avvolge il contenuto di ciascuna colonna. Per noi questo funziona perché solo colonne specifiche avevano bisogno di spazio tra loro per ottenere l'aspetto desiderato.


11

Ciò consentirà uno spazio tra le due colonne e ovviamente se si desidera modificare la larghezza predefinita, è possibile utilizzare i mixin per modificare la larghezza predefinita del bootstrap. Oppure, puoi dare la larghezza usando lo stile CSS in linea.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

4
La semantica di questo non è esattamente ciò che chiede @Muhammed. Stai aggiungendo una modifica nell'ordine delle colonne con pull-left, pull-right.
Luchux,

9

Puoi ottenere la spaziatura tra le colonne usando le classi col-xs- *, all'interno di una div col-xs- * codificata sotto. La spaziatura è coerente in modo che tutte le colonne siano allineate correttamente. Per ottenere una spaziatura uniforme e le dimensioni della colonna, farei quanto segue:

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

6

Usa la .form-groupclasse bootstrap . In questo modo nel tuo caso:

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

1
In che modo un margine inferiore può essere utile qui?
Elisabeth,

12
Ho effettuato il login intenzionalmente solo per non gradire questo hack.
szdrnja,

13
Ho effettuato il login intenzionalmente solo per votare il tuo commento sul login intenzionalmente solo per non gradire questo hack.
Adam Spires,

Ho intenzionalmente effettuato il login solo per votare il tuo commento sul login intenzionalmente solo per votare il commento sul login intenzionalmente per non gradire questo hack.
Nero

5

Secondo la documentazione di Bootstrap 4 dovresti dare un margine negativo ai genitori mx-n*e ai bambini un'imbottitura positivapx-*

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


Ciò che ha funzionato meglio per me (spaziatura verticale tra le file) è stato <div class="row mt-n4">e <div class="col-3 pt-4">.
Gavin,

4

All'interno di col-md- ?, crea un altro div e metti l'immagine in quel div, che puoi facilmente aggiungere imbottitura in questo modo.

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

4

Bootstrap 4 , file custom.scss è possibile aggiungere il seguente codice:

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

per impostazione predefinita $ grid-gutter-width-base: 30px;


1
potresti per favore elaborarlo? non funziona per me
Selva Ganapathi,

2
@SelvaGanapathi devi ricompilare dopo aver modificato queste variabili: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid
gbjbaanb

In Bootstrap 4, questo è offset-md-2 o offset-2
Mahesh il

2

Ho dovuto capire come farlo per 3 colonne. Volevo arrotondare gli angoli dei div e non riuscivo a far funzionare la spaziatura. Ho usato i margini. Nel mio caso, ho calcolato che il 90% dello schermo doveva essere riempito dai div e il 10% per i margini:

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>

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

Per ridimensionarlo correttamente per i dispositivi mobili, ho dovuto modificare la larghezza del CSS dal 30% a width:92.5%;meno@media (max-width:1023px)


2

Dal momento che stai usando bootstrap , immagino che tu voglia rendere la cosa reattiva . In tal caso non dovresti usare dimensioni fisse, ad esempio in "px".

Come soluzione alternativa ad altre soluzioni, propongo di creare entrambe le colonne "col-md-5" invece di "col-md-6", quindi nell'elemento parent "row" che contiene le colonne, aggiungere la classe "justify-content -b Between ", che mette lo spazio libero nel mezzo, come puoi controllare nel documento bootstrap qui

Questa soluzione è valida anche per più di due colonne che regolano naturalmente "col-md-x"

spero che sia d'aiuto ;)


1

è semplice .. devi aggiungere un bordo solido a destra, da sinistra a col- * e dovrebbe funzionare ... :)

sembra così: 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;
}

8
non usi più ID sulla stessa pagina, è totalmente mancanza di conoscenza su come usare i CSS. Usa invece le classi.
LowFieldTheory,

1

So che questo post è un po 'datato ma mi sono imbattuto in questo stesso problema. Esempio del mio 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>

Per creare spazio tra i gruppi ho scavalcato il margine di bootstrap di -15px nel mio file site.css riducendo il margine negativo di 5.

Ecco cosa ho fatto ...

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

Spero che questo aiuti qualcun altro.


1

Avevo bisogno di una colonna sul cellulare e di due colonne dal tablet in verticale, con uguale spaziatura tra loro nel mezzo (anche senza alcuna imbottitura aggiunta alla griglia all'interno delle colonne). Potrebbe essere ottenuto utilizzando le utilità di spaziatura e omettendo il numero in 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>

0

Che ne dici di aggiungere un bordo dello stesso colore dello sfondo usando CSS? Sono nuovo di questo, quindi forse c'è una buona ragione per non farlo, ma sembrava buono quando l'ho provato.


5
Benvenuti nello stack di overflow. Se hai bisogno di maggiori informazioni o chiarimenti su una domanda, ti preghiamo di utilizzare i commenti anziché le risposte.
β.εηοιτ.βε

Se lo sfondo utilizzava un'immagine / trama anziché un colore solido, questo sarebbe ovvio.
Charles Watson,

0

Per ottenere una particolare larghezza di spaziatura tra le colonne, dobbiamo impostare paddingnel layout standard di Bootstrap.

@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

Questo sarà utile ..

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

Se l'uso desidera aumentare o ridurre l'ulteriore margine nella parte destra della casella, è sufficiente modificare la proprietà margine-destra della voce di elenco.

uscita campione

inserisci qui la descrizione dell'immagine


0

Solo un bordo bianco attorno all'elemento avvolgente

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

e primo + ultimo figlio senza bordo

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

2
Un po 'di prosa su cosa e perché potrebbe essere utile.
Uwe Allner,

0
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

Questo per impostazione predefinita fornisce alcune imbottiture all'interno del div esterno nel modo in cui sembri aver bisogno. Inoltre puoi anche modificare il riempimento usando CSS personalizzato.



0

Bootstrap 4

La documentazione dice ( qui ):

Le righe sono wrapper per le colonne. Ogni colonna ha un'imbottitura orizzontale (chiamata grondaia) per controllare lo spazio tra di loro. Questa imbottitura viene quindi contrastata sulle file con margini negativi. In questo modo, tutto il contenuto delle colonne è visivamente allineato lungo il lato sinistro.

Quindi la risposta giusta è: imposta col'padding-left / right uguale a meno il tuo rowmargine-left / right. Così semplice.

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

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

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

col con spaziatura personalizzata


0

inserisci qui la descrizione dell'immagine

Bootstrap 4: separa le colonne usando le righe nidificate.

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

Forse usare la risposta fornita da @estani è un modo più "classico" per farlo con bootstrap4?
sodimel,

0

Crea una classe e usa:

margine: 1,5 em. 5em; larghezza massima: calc (50% - 1em)! importante;

Dove 1em sulla larghezza massima è uguale al margine sinistro / destro sommati.


-1

Anche questo è un modo di farlo e le sue opere. Si prega di controllare il seguente 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>

-2

Usare margin-left è la strada da percorrere:

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

funziona perfettamente


No, ciò non rompe la reattività.
Crasher,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.