Posso dare il col-md-1.5 in bootstrap?

Question

Voglio regolare le colonne in Twitter Trapping.

So che nel bootstrap ci sono 12 colonne di griglia. C'è un modo per manipolare le griglie per avere 1.5 3.5 3.5 3.5 invece di 3 3 3 3?

Answer 1

Come correttamente detto @ bodi0, non è possibile. È necessario estendere il sistema di griglia di Bootstrap (è possibile cercare e trovare varie soluzioni, here è un esempio di 7 colonne) o utilizzare righe annidate, ad es. http://bootply.com/dd50he9tGe.

Nel caso di righe nidificati non si potrebbe sempre ottenere il risultato esatto, ma una analoga

<div class="row"> 
    <div class="col-lg-5"> 
     <div class="row"> 
      <div class="col-lg-4">1.67 (close to 1.5)</div> 
      <div class="col-lg-8">3.33 (close to 3.5)</div> 
     </div>  
    </div> 
    <div class="col-lg-7"> 
     <div class="row"> 
      <div class="col-lg-6">3.5</div> 
      <div class="col-lg-6">3.5</div> 
     </div>  
    </div> 
</div> 

Answer 2

La risposta breve è non (tecnicamente si può dare qualsiasi nome della classe che si desidera, ma questo non avrà alcun effetto, a meno che non si definisce la propria classe CSS - e ricordare - nessun puntini nel selettore di classe). La risposta lunga è di nuovo no, perché Bootstrap includes a responsive, il primo sistema di rete fluida mobile che opportunamente scala fino a 12 colonne all'aumentare della dimensione della porta o della porta di visualizzazione.

Le righe devono essere posizionate all'interno di uno .container (larghezza fissa) o .container-fluid (larghezza intera) per allineamento e riempimento adeguati.

• Utilizzare le righe per creare gruppi orizzontali di colonne.
• Il contenuto deve essere inserito all'interno di colonne e solo le colonne possono essere figli di righe immediati.
• Sono disponibili classi di griglia predefinite come .row e .col-xs-4 per la rapida realizzazione di layout di griglia. Meno mixin possono essere utilizzati anche per più layout semantici.
• Le colonne creano grondaie (spazi tra il contenuto della colonna) tramite padding. Quella spaziatura è sfalsata in righe per la prima e l'ultima colonna tramite margine negativo su .rows.
• Il margine negativo è il motivo per cui gli esempi sottostanti sono superati. È così che il contenuto delle colonne della griglia è allineato con il contenuto non grigliato.
• Le colonne di griglia vengono create specificando il numero di dodici colonne disponibili che si desidera espandere. Ad esempio, tre colonne uguali utilizzerebbero tre .col-xs-4.
• Se più di 12 colonne sono posizionate all'interno di una singola riga, ciascun gruppo di colonne aggiuntive, come una unità, verrà inserito in una nuova riga.
• Le classi di griglia si applicano ai dispositivi con larghezze dello schermo maggiori o uguali alle dimensioni del punto di interruzione e sostituiscono le classi di griglia indirizzate ai dispositivi più piccoli. Pertanto, ad es. l'applicazione di qualsiasi classe .col-md-* a un elemento corrisponderà a non solo per lo stile, ma anche per i dispositivi di grandi dimensioni se non è presente una classe .col-lg-*.

Una possibile soluzione al problema è quello di definire la propria classe CSS con larghezza desiderata, diciamo .col-half{width:XXXem !important} quindi aggiungere questa classe per gli elementi che si desidera insieme con le classi CSS Bootstrap originali.

Answer 3

Questo non è Bootstrap Standard per fornire col-md-1.5 e non è possibile modificare bootstrap.min.css perché non è corretto. è possibile creare in questo modo http://www.bootply.com/125259

Answer 4

È nuvola si semplicemente ignorare la larghezza della colonna ...

<div class="col-md-1" style="width: 12.499999995%"></div> 

Dal col-md-1 è di larghezza 8,33333333%; semplicemente moltiplicare 8.33333333 * 1.5 e impostarlo come larghezza.

Answer 5

Creare nuove classi per sovrascrivere la larghezza. Vedere jFiddle per codice di lavoro.

<div class="row"> 
    <div class="col-xs-1 col-xs-1-5"> 
    <div class="box"> 
     box 1 
    </div> 
    </div> 
    <div class="col-xs-3 col-xs-3-5"> 
    <div class="box"> 
     box 2 
    </div> 
    </div> 
    <div class="col-xs-3 col-xs-3-5"> 
    <div class="box"> 
     box 3 
    </div> 
    </div> 
    <div class="col-xs-3 col-xs-3-5"> 
    <div class="box"> 
     box 4 
    </div> 
    </div> 
</div> 

.col-xs-1-5 { 
    width: 12.49995%; 
} 
.col-xs-3-5 { 
    width: 29.16655%; 
} 
.box { 
    border: 1px solid #000; 
    text-align: center; 
} 

Answer 6

Come già menzionato in Bootstrap 3, è possibile utilizzare le tecniche nest/embed.

Tuttavia, sta diventando più ovvio utilizzare ora una funzionalità davvero fantastica di Bootstrap 4. Semplicemente hai la possibilità di utilizzare le classi col-{breakpoint}-auto (ad esempio col-md-auto) per rendere automaticamente le dimensioni delle colonne automaticamente in base alla larghezza naturale del suo contenuto. check this for example