Bootstrap 3-définit la largeur du conteneur à 940 px Maximum pour les ordinateurs de bureau?
j'ajoute une toute nouvelle section à un site Web en utilisant Twitter Bootstrap 3, mais le conteneur ne peut pas aller plus large que 940px au total pour Desktop - comme il va jeter l'en-tête et le pied de page {includes}.
donc 940px représente 12 x 60 = 720px pour les colonnes et 11 x 20 = 220px pour les gouttières. Bien sûr, mais comment les entrer dans Bootstrap 3 puisqu'il n'y a pas de champ/Paramètre @ColumnWidth dans la section Personnaliser?
j'ai essayé en réglant le @container-LG-desktop et le @container-desktop à la fois sur 940px - mais cela ne fonctionne pas.
5 réponses
en premier lieu considérer la petite grille, voir: http://getbootstrap.com/css/#grid-options . Une largeur de conteneur max de 750 px peut-être à petit pour vous (lire aussi: pourquoi Bootstrap 3 force la largeur du conteneur à certaines tailles? )
lors de l'utilisation de la petite grille utiliser les requêtes Médias pour définir la largeur max-container:
@media (min-width: 768px) { .conteneur { largeur max: 750px; } }
deuxième lisez aussi cette question: Bootstrap 3 - grille de largeur de 940 px? , peut-être un double?
12 x 60 = 720px pour les colonnes et 11 x 20 =220px
il y aura également une gouttière de 20px sur les deux côtés de la grille afin 220 + 720 + 40 makes 980px
il n'y a pas de " @ColumnWidth
vous colums largeur sera calculé dynamiquement en fonction de vos paramètres dans des variables.peu.
vous pouvez mettre @grid-columns et @grid-gutter-width . La largeur d'une colonne sera définie en pourcentage via la grille.moins dans mixin.moins:
.calc-grid(@index, @class, @type) when (@type = width) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
mise à jour Set @grille-gouttière de la largeur de 20px;, @conteneur de bureau: 940px;, @conteneur-grand-desktop: @conteneur de bureau et de recompiler bootstrap.
il y a une solution beaucoup plus facile (IMO) dans Bootstrap 3 qui ne vous oblige pas à compiler moins personnalisé. Vous avez juste à tirer parti du cascade dans " Feuilles de style en cascade."
configurez votre chargement CSS comme ça...
<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />
où /css/custom.css est votre définition de style unique. L'intérieur de ce fichier, ajouter la définition suivante...
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
cela va annuler Bootstrap paramètre par défaut width: 1170px lorsque le viewport est 1200px ou plus grand.
testé dans Bootstrap 3.0.2
la meilleure option est d'utiliser la version originale sans bootstrap (get it from github).
Ouvrir variables.moins et look pour // Media queries points d'arrêt
trouver ce code et changer la valeur du point de rupture:
// Large screen / wide desktop
@screen-lg: 1200px; // change this
@screen-lg-desktop: @screen-lg;
le changer en 9999px par exemple, et cela empêchera le point de rupture d'être atteint, de sorte que votre site sera toujours charger la précédente requête médias qui a 940px conteneur
si vous ne souhaitez pas compiler bootstrap, copiez ce qui suit et insérez-le dans votre fichier CSS personnalisé. Il n'est pas recommandé de changer le fichier CSS original de bootstrap. De plus, vous ne pourrez pas modifier le bootstrap original css si vous le chargez à partir d'un cdn.
coller ce dans votre fichier CSS personnalisé:
@media (min-width:992px)
{
.container{width:960px}
}
@media (min-width:1200px)
{
.container{width:960px}
}
je suis ici en train de régler mon container à 960px pour tout ce qui peut l'accommoder, et en gardant les tailles des médias de repos par défaut valeur. Vous pouvez le régler à 940px pour ce problème.
Si si ne fonctionne pas, alors utiliser "!Important "
@media (min-width: 1200px) { .conteneur { largeur: 970px !important; } }