sistema di griglia di bootstrap di Twitter. Spaziatura tra le colonne

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

L’output sarebbe semplicemente costituito da due colonne l’una accanto all’altra che occupano l’intera larghezza della pagina. Supponi che la larghezza sia stata impostata su 1000px quindi ogni div sarebbe largo 500px .

Se volessi uno spazio di 100px tra i due come potrei ottenere questo? Ovviamente automaticamente attraverso il bootstrap le dimensioni div diventerebbero 450px ciascuna per compensare lo spazio

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

 

Stavo affrontando lo stesso problema; e il seguente ha funzionato bene per me. Spero che questo aiuti qualcuno ad atterrare qui:

 
Some Content..
Some Second Content..

Questo renderà automaticamente uno spazio tra i 2 div.

inserisci la descrizione dell'immagine qui

So di essere in ritardo per la festa, ma potresti provare a spaziare le caselle con il padding.

 
Hello
Hello

CSS:

 .box { padding: 0 5px 0 5px; } .box .inner { background-color: https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#fff; } 

Provaci

Usa i bootstrap

 .form-group 

class. Così nel tuo caso:

 

Ciò consentirà uno spazio tra le due colonne e ovviamente se si desidera modificare la larghezza di default si può andare a mixin per modificare la larghezza di bootstrap predefinita. Oppure, puoi dare la larghezza usando lo stile css in linea. La scelta è tutta tua!!!

  

Saluti!!!

È ansible ottenere spaziatura tra le colonne usando le classi col-xs- *, all’interno di un col-xs- * div codificato di seguito. La spaziatura è coerente in modo che tutte le colonne siano allineate correttamente. Per ottenere una spaziatura uniforms e la dimensione della colonna, farei quanto segue:

 
Some Content..
Some Second Content..
Some Second Content..
Some Second Content..
Some Second Content..
Some Second Content..
Some Second Content..
Some Second Content..

puoi usare la clip di sfondo e il modello a scatola con la garanzia del margine

 .box{ box-model: border-box; border: 3px solid transparent; background-clip:padding-box; } 
 

Ho avuto problemi simili con lo spazio tra le colonne. Il problema di root è che le colonne in bootstrap 3 e 4 usano il padding al posto del margine. Quindi i colors 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 colonne e mantenere le stesse larghezze di gronda del resto del sistema di griglia.

Questo era il risultato finale che stavamo cercando

inserisci la descrizione dell'immagine qui

Avere il divario con un’ombra discendente tra le colonne era problematico. Non volevamo spazio aggiuntivo tra le colonne. Volevamo solo che le grondaie fossero “trasparenti” in modo che il colore di sfondo del sito comparisse tra due colonne bianche.

questo è il markup per le due colonne

 

Facebook

Tweets

CSS

 .raised-block { background-color: https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#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 di class “riga”. E questo div, lo abbiamo chiamato “alzato-blocco”, deve essere il fratello diretto di una colonna

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

Il principale svantaggio di questo approccio è che richiede un markup extra che avvolge il contenuto di ogni colonna. Per noi funziona perché solo le colonne specifiche necessitavano di uno spazio tra loro per ottenere l’aspetto desiderato.

Spero che questo ti aiuti

Bootstrap 4 , file custom.scss puoi 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 ); 

di default $ grid-gutter-width-base: 30px;

Ho dovuto capire come fare questo per 3 colonne. Volevo aggirare gli angoli delle div e non riuscivo a far funzionare la spaziatura. Ho usato i margini. Nel mio caso ho pensato che il 90% dello schermo fosse riempito dai div e il 10% per i margini:

html:

 

Orange Div

Green Div

Aqua Div

e CSS:

 https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#orange { background-color:orange; border-radius: 30px; padding: 20px; margin: 2.5% 2.5% 0 2.5%; width:30%; } https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#green { background-color:green; border-radius: 30px; padding: 20px; margin: 2.5% 0 0 0; width:30%; } https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#aqua { background-color:https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#39F; border-radius: 30px; padding: 20px; margin: 2.5% 2.5% 0 2.5%; width: 30%; } 

Per farlo ridimensionare correttamente per i dispositivi mobili, ho avuto il CSS cambiare la larghezza dal 30% alla width:92.5%; sotto @media (max-width:1023px)

Modo semplice

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

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

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

 
  
body{ background:https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#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: https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#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; }

Dato che stai usando il bootstrap , credo che tu voglia rendere la cosa retriggers . In questo caso dovresti usare dimensioni fisse, in ‘px’ per esempio.

Come soluzione alternativa ad altre soluzioni, propongo di rendere entrambe le colonne “col-md-5” anziché “col-md-6”, e quindi nell’elemento padre “riga” che contiene le colonne, aggiungere la class “justify-content” -tra via “, che mette lo spazio libero nel mezzo, come è ansible controllare nel documento di bootstrap qui

Questa soluzione è valida anche per più di due colonne che regolano ovviamente “col-md-x”

spero che sia d’aiuto 😉

è semplice .. devi aggiungere il bordo solido a destra, a sinistra a COL- * e dovrebbe funzionare .. 🙂

assomiglia a questo: http://i.stack.imgur.com/CF5ZV.png

HTML:

 

CSS:

 divhttps://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#services_block { height: 355px; background-color: https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#33363a; border-left:3px solid white; border-right:3px solid white; } 

Per ottenere una particolare larghezza di spaziatura tra le colonne, dobbiamo impostare il padding nel 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/https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#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; } 
 
Left
Right

Questo sarà utile ..

 .list-item{ margin-right:-10px; margin-top:10px; margin-bottom: 10px; border: 1px solid https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/#eee; padding: 0px; } 
 

Your name

Solo un bordo bianco attorno all’elemento wrap

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

  
Keci
Keci
 

Questo di default fornisce un po ‘di padding all’interno del div esterno nel modo in cui sembri aver bisogno. Inoltre puoi anche modificare il padding usando CSS personalizzati.

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.