Come personalizzare le larghezze delle colonne Bootstrap?

Question

Ho questo, ma ritengo che 4 sia troppo grande per la larghezza della mia barra laterale e 3 è troppo piccolo (deve aggiungere fino a 12).

<div class="col-md-8"> 
    <div class="col-md-4"> 

Ho provato questo ma non funziona:

<div class="col-md-8.5"> 
    <div class="col-md-3.5"> 

C'è un altro modo per ottenere un risultato simile?

Grazie per il vostro aiuto!

Answer 1

Per espandere sulla risposta @ di Isherwood, ecco il codice completo per la creazione su misura -sm- larghezze in Bootstrap 3.3

In generale si desidera cercare una larghezza colonna esistente (diciamo col-sm-3) e copiare tutti gli stili che applica ad esso, compresi quelli generici, fino al tuo foglio di stile personalizzato in cui definisci le nuove larghezze delle colonne.

.col-sm-3half, .col-sm-8half { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

@media (min-width: 768px) { 
    .col-sm-3half, .col-sm-8half { 
     float: left; 
    } 
    .col-sm-3half { 
     width: 29.16666667%; 
    } 
    .col-sm-8half { 
     width: 70.83333333%; 
    } 
} 

Answer 2

è possibile personalizzare foglio di stile bootstrap, come in:

.col-md-8{ 
    width: /*as you wish*/; 
} 

Quindi, impostare la media query anche per questo, come in:

@media screen and (max-width:768px){ 
    .col-md-8{ 
    width:99%; 
    } 
} 

Answer 3

si potrebbe certamente creare le proprie classi:

.col-md-3point5 {width: 28.75%} 
.col-md-8point5 {width: 81.25%;} 

Farei questo prima di fare confusione con le colonne predefinite. Potresti voler usare quelli all'interno di questi.

Probabilmente vorresti anche metterli in una dichiarazione di media query in modo che si applichino solo a dimensioni dello schermo più grandi di quelle mobili.

Answer 4

Per una griglia di 12 colonne, se si desidera aggiungere la metà di una colonna (4,16667%) per ogni larghezza della colonna. Questo è quello che fai.

Ad esempio, per col-MD- X, definire .col-MD- X-5 con i seguenti valori.

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667 
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667 
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667 
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667 
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667 
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667 
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667 
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667 
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667 
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667 
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667 

Ho arrotondato determinati valori.

In secondo luogo, per evitare di copiare il codice CSS dall'originale col-md- X, utilizzarli nella dichiarazione della classe. Fai attenzione che siano aggiunti prima di quelli modificati. In questo modo, solo la larghezza diventa prioritaria.

<div class="col-md-2 col-md-2-5">...</div> 
<div class="col-md-5">...</div> 
<div class="col-md-4 col-md-4-5">...</div> 

Infine, non dimenticare che il totale non deve superare 12 colonne, che rappresentano il 100%.

Spero che aiuti!

Answer 5

È possibile utilizzare propri mixins Colonna di Bootstrap make-xx-column():

.col-md-8half { 
    .make-md-column(8.5); 
} 

.col-md-3half { 
    .make-md-column(3.5); 
}