Cambio larghezza bootstrap

Question

Utilizzo Bootstrap per il mio sito Web e ho bisogno di creare un contenitore con dimensioni di 1250 px, ma il problema è quando cambio la classe del contenitore Bootstrap la reattività non funzionerà più.

Cosa devo fare?

Answer 1

Hai provato il contenitore di liquidi per il bootstrap?

Try Change 'contenitore' per il 'contenitore fluido'

Può essere d'aiuto

Answer 2

Proprio l'impostazione 'contenitore fluido' creerà un contenitore di larghezza 100%. L'involucro dell'intero oggetto in un contenitore con larghezza di 1250 px causerà la mancata risposta del contenitore. La cosa migliore da fare è quello di assegnare un 'max-width' al vostro contenitore di fluido, ho incluso il markup di seguito:

<div class="container-fluid" style="background-color:#CDCDCD; max-width:1250px"> 

Container-Fluid

Answer 3

È possibile modificare la larghezza del contenitore come si like.For questo si prega di aggiungere queste linee css

@media (min-width: 1200px) { 
    .container { 
    width: 1250px !important; 
    } 
} 

Grazie

Answer 4

È possibile modificare la larghezza del contenitore come ti piace. Per questo si prega di aggiungere queste righe css:

.container{ 
    max-width:1250px; 
    width:100%; 
} 

Answer 5

mettere una classe speciale come my_custom_menu al vostro contenitore di menu. quindi copiare questo stile qui sotto al tuo foglio di stile ....

@media (min-width: 1200px) { 
    .container.my_custom_menu { 
    width: 1250px; 
    } 
} 

Thank You

Answer 6

Si può dare larghezza al contenitore nel file css:

.container { 
    width:1250px; 
} 

quindi scrivere media query per aver reso reattivo:

@media only screen and 
(max-width : 1249px) { 

    .container { 
     width:100%; 
    } 

} 

Answer 7

È possibile creare un contenitore personalizzato e utilizzarlo con il contenitore predefinito (solo sovrascrivere iting la larghezza). è possibile modificare la larghezza in base alle proprie necessità:

CSS:

@media (min-width: 768px) { 
.my-custom-container{ 
    width:600px; 
}} 

@media (min-width: 992px) { 
.my-custom-container{ 
    width:720px; 
}} 

@media (min-width: 1200px) { 
.my-custom-container{ 
    width:900px; 
}} 

HTML:

<div class="container my-custom-container"> 
your content Goes here ....... 
</div>