J'utilise Bootstrap 3 sur un nouveau projet. La disposition doit être une largeur maximum de 940px (bureau etc.), 12 colonnes (colonne de 60px, gouttière de 20px).Bootstrap 3 - 940px largeur grille?
J'ai défini .container sur max-width: 940px; mais cela désactive la grille, pour une raison quelconque. Cela me donne 50px colonne avec 30px gouttière. J'ai donc besoin de réduire la gouttière à 20px et ajouter le 10px à la colonne.
Mais comment faire?
Utilisation:
@media (min-width: 1200px) {
.container {
max-width: 970px;
}
Note: 970 moins 30px (gouttière) fait 940px pour votre conception.
mise à jour
Voir: http://bootply.com/86257
Set @ grille-gouttière largeur 20px; et recompilez bootstrap.
Dans ce cas, votre .container /.row aura une largeur de 960px. Défini dans variabless.less: @container-desktop: ((940px + @grid-gutter-width));
Notez que si vous définissez @container-large-desktop: @container-desktop dans variables.less, je n'ai pas besoin de la requête de média ci-dessus.
Vous devez commenter la section suivante bootstrap.responsive.css pour le début 940 vue
@media (min-width: 1200px) {
}
Vous ne savez pas si je comprends cette réponse? – brother
Bootstrap 3 ne possède pas de fichier bootstrap.responsive.css. –
La meilleure option est d'utiliser la version moins originale d'amorçage (obtenir de github).
Ouvrir variables.less et rechercher // médias requêtes des points d'arrêt
// Large screen/wide desktop
@screen-lg: 1200px; // change this
@screen-lg-desktop: @screen-lg;
Modifier le dernier point d'arrêt à 9999px par exemple, et cela empêchera ce point d'arrêt à atteindre, afin que votre site toujours charger les médias précédent requête:
@screen-md: 992px; // this one has 940px container
@screen-desktop: @screen-md;
pour modifier la largeur de la colonne et gouttière, faites défiler un peu vers le bas dans le même fichier et cherchez
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
Ici vous pouvez le configurer
Et enfin, ofcource compile le fichier bootstrap.less dans css.
Salutations
Oui, mais les colonnes et la gouttière n'ont toujours pas la bonne largeur? Les spécifications de conception que j'ai eues disent qu'une image dans 4 colonnes est large de 300px - ceci ne se produirait pas avec la configuration actuelle? – brother
pourriez-vous ajouter un écran de votre conception? Voir aussi http://getbootstrap.com/css/#grid la grille moyenne (970) a une largeur de colonne maximale de ((970 - gouttière/12)) 78px. 4 x 78 font 312. y compris la gouttière. Vous pourriez faire votre image en ajoutant la classe 'img-responsive' peut-être. –
J'ai ajouté une image de la grille ci-dessus. 940px largeur. Colonnes 60px avec gouttière 20px. Possible? – brother