Come fare più campate cinguettano bootstrap senza spaziatura tra

Sto cercando di ottenere 3 colonne su una pagina senza alcuna spaziatura tra loro in bootstrapCome fare più campate cinguettano bootstrap senza spaziatura tra

qui è quello che ottengo:

span fail

qui è quello che voglio:

span win

ecco il codice attualmente sto usando:

<div class="row"> 
    <div class="span4 blue1"> 
     <h1>span4 (1)</h1> 
    </div> 
    <div class="span4 blue2"> 
     <h1>span4 (2)</h1> 
    </div> 
    <div class="span4 blue3"> 
     <h1>span4 (3)</h1> 
    </div> 
</div>

io non sono davvero sicuro di come ottenere quello che voglio con bootstrap - qualsiasi aiuto apprezzato

fonte

2012-05-23 falter

Questa domanda è simile a ciò che viene chiesto qui: http://stackoverflow.com/questions/16489307/how-to-remove-gutter-space-for-a-specific-div-only-bootstrap. Cerca risposte utili, poiché la domanda chiede anche come rimuovere la grondaia (spazi tra le divs span), solo per uno specifico div o div. –

La spaziatura delle colonne che si vede è un intento del sistema di griglia.

Se si desidera non disporre di spazi tra le colonne, è necessario applicare direttamente questi elementi allo stile e non utilizzare lo stile di layout della griglia.

fonte

2012-05-23 11:19:53

può essere molto più lavoro per ricostruire tutto piuttosto che modificare il margine nel CSS in meno di 5 minuti ... – vsync

Se si utilizzano meno file per produrre il cst di bootstrap, impostare @gridGutterWidth su 0 nel file variables.less. Altrimenti, suppongo che sia un vero problema cambiare tutti i margini e i paddings sul file css.

fonte

2012-05-23 11:24:24 periklis

È possibile creare la propria classe che rimuove lo spazio fra le vostre span elementi della griglia in questo modo:

CSS

.no-space [class*="span"] { 
    margin-left: 0; 
}

allora si può solo includerlo all'interno del contenitore .row div:

<div class="row no-space"> 
    <div class="span3 blue1"> 
     <h1>span4 (1)</h1> 
    </div> 
    <div class="span3 blue2"> 
     <h1>span4 (2)</h1> 
    </div> 
    <div class="span3 blue3"> 
     <h1>span4 (3)</h1> 
    </div> 
</div>

Si noti inoltre che il contenitore .row Classe rimuove 20px sul lato sinistro per accogliere gli elementi della griglia in modo da potrebbe essere necessario rimuovere quello pure in questo modo:

.no-space { 
    margin-left:0; 
}

in modo da giocare in giro per vedere che cosa funziona.

Dimostrazione: http://jsfiddle.net/G36uQ/

fonte

2012-05-23 12:40:22

Questo mezzo funziona - permette alle scatole di sedersi l'una accanto all'altra, ma lascia un vuoto il lato più a destra: posso risolverlo aggiungendo manualmente una larghezza e rendendolo importante, ma non sono sicuro che sia il modo migliore per farlo perché richiede che tutte le query di @media vengano modificate. grazie comunque - la migliore risposta finora! – falter

@kevyn lo spazio all'estrema destra è il margine che abbiamo rimosso da ogni elemento di griglia span, puoi ruotare la tua griglia su [Personalizza] (http://twitter.github.com/bootstrap/download.html) sezione della pagina di documentazione bootstrap (sezione 'Grid system') con una grondaia di zero pixel tra gli elementi della griglia e semplicemente copia la griglia risultante con i calcoli reattivi e posizionala all'interno del tuo foglio di stile css, in questo modo puoi avere un griglia esatta con larghezze proporzionate. –

anche le correzioni, che sono semplicemente sostituzioni margin-left su intervalli – zethus

Ho una riga con due colonne. Per tre, regolare di conseguenza. E ho aggiunto questo al mio .css che carica dopo e quindi sovrascrive il file bootstrap.css.

.no-space { /*apply to the row */ 
     left-margin:0; 
} 


.row-fluid .span6 { /* overrides bootstrap.css to allow for no gutter */ 
    /* width: 48.051948051948045%; 
    *width: 48.008658008658%; */ 

    width: 50%; 
    *width: 50%; 
}

E l'HTML è:

<div class="row-fluid no-space"> <!-- r --> 

      <div class="span6"> 
       <h4 class="titles">xxx</h4> 
       <img src="img/system/xxx.png"> 
      </div> 

      <div class="span6"> 
       <h4 class="titles">xxx</h4> 
       <img src="img/system/xxx.png"> 
      </div> 


    </div><!--/r-->

Ora, ho due colonne a larghezza 50% senza grondaia mezzo.

fonte

2012-09-12 17:31:09

Naturalmente, è possibile creare la propria classe invece di superare la classe bootstrap. Inoltre, puoi creare estensioni di qualsiasi larghezza usando: numero myspan/numero di colonne. Quindi, se hai 12 colonne e vuoi un intervallo di 5 è solo 5/12 per darti la percentuale per la larghezza. –

ho aggiunto: offset0 per questo motivo esatto

.row-fluid .offset0 { 
    margin-left: 0 
} 
.row-fluid .span12.offset0 { 
    width: 99.99999999999999%; 
    *width: 99.93055555555554%; 
} 
.row-fluid .span11.offset0 { 
    width: 91.66666666666666%; 
    *width: 91.59722222222221%; 
} 
.row-fluid .span10.offset0 { 
    width: 83.33333333333331%; 
    *width: 83.26388888888887%; 
} 
.row-fluid .span9.offset0 { 
    width: 74.99999999999999%; 
    *width: 74.93055555555554%; 
} 
.row-fluid .span8.offset0 { 
    width: 66.66666666666666%; 
    *width: 66.59722222222221%; 
} 
.row-fluid .span7.offset0 { 
    width: 58.33333333333333%; 
    *width: 58.263888888888886%; 
} 
.row-fluid .span6.offset0 { 
    width: 49.99999999999999%; 
    *width: 49.93055555555555%; 
} 
.row-fluid .span5.offset0 { 
    width: 41.66666666666666%; 
    *width: 41.597222222222214%; 
} 
.row-fluid .span4.offset0 { 
    width: 33.33333333333333%; 
    *width: 33.263888888888886%; 
} 
.row-fluid .span3.offset0 { 
    width: 24.999999999999996%; 
    *width: 24.930555555555554%; 
} 
.row-fluid .span2.offset0 { 
    width: 16.666666666666664%; 
    *width: 16.59722222222222%; 
} 
.row-fluid .span1.offset0 { 
    width: 8.333333333333332%; 
    *width: 8.263888888888888%; 
}

fonte

2013-04-21 17:08:14

Davvero bello ... :) GRAZIE! –

Grazie, questo è quello che stavo cercando, come questo è quello che ho cercato di fare, seguendo la logica di bootstrap "standard". – doterobcn

Fantastico .... !!!! – Savaratkar

In generale, se si vuole ancora mantenere la grondaia, ma vuole solo per semplificare o allargarlo senza creare vuoti all'estrema destra, poi basta fare certo che i margini e le larghezze rilevanti aumentino al 100%, tenendo presente che un margine non viene applicato all'estremità più a sinistra. Così, per il layout di colonna 3, se si voleva, per esempio, una grondaia 0,5%, quindi scegliere 3 * 33% + 2 * 0.5% = 100%

.row-fluid .span4 { 
    width: 33%; 
    margin-left: 0.5%; 
}

fonte

2013-05-09 12:09:02 Thor

classe completa, sovrascritto .row-fluido con add. nessuno spazio.

/* 
* Bootstrap Grid System without space 
* 
* Overwrite Bootstrap grid system, removing margin 
* Usage : 
* Simple add no-space class with row-fluid 
* <ul class="row-fluid no-space"> ... </ul> 
*/ 
.row-fluid.no-space [class*="span"] { 
    margin-left: 0%; 
    *margin-left: -0.06944%; 
} 
.row-fluid.no-space [class*="span"]:first-child { 
    margin-left: 0; 
} 
.row-fluid.no-space .controls-row [class*="span"] + [class*="span"] { 
    margin-left: 0%; 
} 
.row-fluid.no-space .span12 { 
    width: 99.99999999999999%; 
    *width: 99.93055555555554%; 
} 
.row-fluid.no-space .span11 { 
    width: 91.66666666666666%; 
    *width: 91.59722222222221%; 
} 
.row-fluid.no-space .span10 { 
    width: 83.33333333333331%; 
    *width: 83.26388888888887%; 
} 
.row-fluid.no-space .span9 { 
    width: 74.99999999999999%; 
    *width: 74.93055555555554%; 
} 
.row-fluid.no-space .span8 { 
    width: 66.66666666666666%; 
    *width: 66.59722222222221%; 
} 
.row-fluid.no-space .span7 { 
    width: 58.33333333333333%; 
    *width: 58.263888888888886%; 
} 
.row-fluid.no-space .span6 { 
    width: 49.99999999999999%; 
    *width: 49.93055555555555%; 
} 
.row-fluid.no-space .span5 { 
    width: 41.66666666666666%; 
    *width: 41.597222222222214%; 
} 
.row-fluid.no-space .span4 { 
    width: 33.33333333333333%; 
    *width: 33.263888888888886%; 
} 
.row-fluid.no-space .span3 { 
    width: 24.999999999999996%; 
    *width: 24.930555555555554%; 
} 
.row-fluid.no-space .span2 { 
    width: 16.666666666666664%; 
    *width: 16.59722222222222%; 
} 
.row-fluid.no-space .span1 { 
    width: 8.333333333333332%; 
    *width: 8.263888888888888%; 
} 
.row-fluid.no-space .offset12 { 
    margin-left: 99.99999999999999%; 
    *margin-left: 99.8611111111111%; 
} 
.row-fluid.no-space .offset12:first-child { 
    margin-left: 99.99999999999999%; 
    *margin-left: 99.8611111111111%; 
} 
.row-fluid.no-space .offset11 { 
    margin-left: 91.66666666666666%; 
    *margin-left: 91.52777777777777%; 
} 
.row-fluid.no-space .offset11:first-child { 
    margin-left: 91.66666666666666%; 
    *margin-left: 91.52777777777777%; 
} 
.row-fluid.no-space .offset10 { 
    margin-left: 83.33333333333331%; 
    *margin-left: 83.19444444444443%; 
} 
.row-fluid.no-space .offset10:first-child { 
    margin-left: 83.33333333333331%; 
    *margin-left: 83.19444444444443%; 
} 
.row-fluid.no-space .offset9 { 
    margin-left: 74.99999999999999%; 
    *margin-left: 74.8611111111111%; 
} 
.row-fluid.no-space .offset9:first-child { 
    margin-left: 74.99999999999999%; 
    *margin-left: 74.8611111111111%; 
} 
.row-fluid.no-space .offset8 { 
    margin-left: 66.66666666666666%; 
    *margin-left: 66.52777777777777%; 
} 
.row-fluid.no-space .offset8:first-child { 
    margin-left: 66.66666666666666%; 
    *margin-left: 66.52777777777777%; 
} 
.row-fluid.no-space .offset7 { 
    margin-left: 58.33333333333333%; 
    *margin-left: 58.19444444444444%; 
} 
.row-fluid.no-space .offset7:first-child { 
    margin-left: 58.33333333333333%; 
    *margin-left: 58.19444444444444%; 
} 
.row-fluid.no-space .offset6 { 
    margin-left: 49.99999999999999%; 
    *margin-left: 49.86111111111111%; 
} 
.row-fluid.no-space .offset6:first-child { 
    margin-left: 49.99999999999999%; 
    *margin-left: 49.86111111111111%; 
} 
.row-fluid.no-space .offset5 { 
    margin-left: 41.66666666666666%; 
    *margin-left: 41.52777777777777%; 
} 
.row-fluid.no-space .offset5:first-child { 
    margin-left: 41.66666666666666%; 
    *margin-left: 41.52777777777777%; 
} 
.row-fluid.no-space .offset4 { 
    margin-left: 33.33333333333333%; 
    *margin-left: 33.19444444444444%; 
} 
.row-fluid.no-space .offset4:first-child { 
    margin-left: 33.33333333333333%; 
    *margin-left: 33.19444444444444%; 
} 
.row-fluid.no-space .offset3 { 
    margin-left: 24.999999999999996%; 
    *margin-left: 24.86111111111111%; 
} 
.row-fluid.no-space .offset3:first-child { 
    margin-left: 24.999999999999996%; 
    *margin-left: 24.86111111111111%; 
} 
.row-fluid.no-space .offset2 { 
    margin-left: 16.666666666666664%; 
    *margin-left: 16.52777777777778%; 
} 
.row-fluid.no-space .offset2:first-child { 
    margin-left: 16.666666666666664%; 
    *margin-left: 16.52777777777778%; 
} 
.row-fluid.no-space .offset1 { 
    margin-left: 8.333333333333332%; 
    *margin-left: 8.194444444444443%; 
} 
.row-fluid.no-space .offset1:first-child { 
    margin-left: 8.333333333333332%; 
    *margin-left: 8.194444444444443%; 
}

Uso:

<ul class="media-list row-fluid no-space"> 
    <li class="media span4"> 
    <a class="pull-left" href="#"> 
     <img class="media-object" data-src="holder.js/64x64"> 
    </a> 
    <div class="media-body"> 
     <h4 class="media-heading">Media heading</h4> 
     ... 

     <!-- Nested media object --> 
     <div class="media"> 
     ... 
    </div> 
    </div> 
    </li> 
    <li class="media span4"> 
    <a class="pull-left" href="#"> 
     <img class="media-object" data-src="holder.js/64x64"> 
    </a> 
    <div class="media-body"> 
     <h4 class="media-heading">Media heading</h4> 
     ... 

     <!-- Nested media object --> 
     <div class="media"> 
     ... 
    </div> 
    </div> 
    </li> 
    <li class="media span4"> 
    <a class="pull-left" href="#"> 
     <img class="media-object" data-src="holder.js/64x64"> 
    </a> 
    <div class="media-body"> 
     <h4 class="media-heading">Media heading</h4> 
     ... 

     <!-- Nested media object --> 
     <div class="media"> 
     ... 
    </div> 
    </div> 
    </li> 
</ul>

Demo on Bootply

fonte

2013-05-24 11:47:18

Grazie a @Skelly per il collegamento Demo. –

Bel lavoro, servito al mio scopo :) – Tamil

Grazie !! (So che è zoppo commentare con un semplice "grazie", ma anche far sapere agli altri che questa è la risposta giusta) – Benj

Se si seleziona il file grid.less nel bootstrap, la griglia arco * è definito in una semplice mixin:

#grid > .core(@gridColumnWidth, @gridGutterWidth);

Per costruire un arco * griglia senza spazi è possibile utilizzare in meno:

.my-nospace-grid { 
    #grid > .core(78px, 0px); 
}

Questo darà 12 * 78px = 936px.

di scegliere il vostro valori, controllare le dimensioni di default definiti in variables.less:

// GRID 
// -------------------------------------------------- 


// Default 940px grid 
// ------------------------- 
@gridColumns:    12; 
@gridColumnWidth:   60px; 
@gridGutterWidth:   20px; 
@gridRowWidth:   (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 

// 1200px min 
@gridColumnWidth1200:  70px; 
@gridGutterWidth1200:  30px; 
@gridRowWidth1200:  (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); 

// 768px-979px 
@gridColumnWidth768:  42px; 
@gridGutterWidth768:  20px; 
@gridRowWidth768:   (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); 


// Fluid grid 
// ------------------------- 
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 

// 1200px min 
@fluidGridColumnWidth1200:  percentage(@gridColumnWidth1200/@gridRowWidth1200); 
@fluidGridGutterWidth1200:  percentage(@gridGutterWidth1200/@gridRowWidth1200); 

// 768px-979px 
@fluidGridColumnWidth768:  percentage(@gridColumnWidth768/@gridRowWidth768); 
@fluidGridGutterWidth768:  percentage(@gridGutterWidth768/@gridRowWidth768);

fonte

2013-05-27 14:06:14 Paweld2

<div> 
     <div class="container"> 
     <div class="row"> 
      <div class="span12"> 

       <div class="row"> 
      <div style="background:#000;" class="span6">testcont 1</div> 
      <div style="background:#000;" class="span6">testcont 2</div> 
      <div style="background:#000;" class="span6">testcont 3</div> 
      <div style="background:#000;" class="span6">testcont 4</div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div>

fonte

2013-05-31 11:38:18

ho avuto lo stesso problema come si fa, quindi ecco come ho ottenuto attraverso questo sulla più recente Bootstrap versione 2.3.1:

prima cosa è necessario aggiungere una classe "no-spazio" al div genitore con classe "riga" in questo modo:

<div class="row-fluid no-space"> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
</div>

Poi si modifica il css in base al numero di elementi che si desidera in quella riga, in questo modo:

.no-space [class*="span"]{ 
    margin-left: 0 !important; 
    width: 25% !important; // This is for 4 elements ONLY in the row 
}

La matematica per la larghezza è:

100/number of elements in the row = width.

Nel mio caso è stato di 4 elementi in modo è:

100/4 = 25%;

Se era 3 elementi sarebbe:

100/3 = 33.3333333333%;

Se in un progetto si verificano più casi con questo problema, è possibile aggiungere un ID o una classe univoci alla regola css in modo che non li riguardi tutti.

Questo è tutto.Non c'è bisogno di scaricare nuovamente il bootstrap e trattare con i file di origine
PS: Questo metodo funziona in design reattivo pure;)

fonte

2013-06-17 13:27:58 Ronen

Ecco un esempio di colonne di larghezza pari con e senza spazi: http://codepen.io/ngeorgiev/pen/Lgxin/

fonte

2014-03-31 15:37:27

Come fare più campate cinguettano bootstrap senza spaziatura tra

risposta

Problemi correlati