web-dev-qa-db-fra.com

Bootstrap 3: Comment définir la grille par défaut sur une largeur de 960px?

Je travaille avec Bootstrap 3 et le client souhaite que la largeur du conteneur de site Web soit définie sur 960px. Est-ce que je modifie directement le fichier CSS ou quel est le meilleur moyen de le faire? J'ai entendu quelque chose à propos de "moins". Est-ce que je personnalise le téléchargement? Merci!

Mise à jour: le site n'a PAS besoin d'être réactif, je peux donc désactiver cette réactivité et simplement ajouter la largeur de 960px au CSS et en finir avec cela ou cela pose-t-il des problèmes ailleurs?

lesstwitter-bootstrap-3
13
redshift

Pour Bootstrap3, vous pouvez le personnaliser pour obtenir 960px par défaut ( http://getbootstrap.com/customize/ )

  1. remplacez @ container-large-desktop de ((1140px + @ grid-Gutter-width)) par ((940px + @ grid-Gutter-width)).
  2. changer @ grid-Gutter-width de 30px à 20px.

téléchargez ensuite votre version personnalisée de bootstrap et utilisez-la. Il devrait être 960px par défaut maintenant.

52
Henry Neo

Je voulais que la largeur maximale soit 810px, alors j'ai utilisé une requête multimédia comme celle-ci:

@media (min-width: 811px) {    
    .container{
        width:810px;
    }
}
4
AnotherOther

Bootstraps gridsystem est FLUID. Cela signifie que cela fonctionne en pourcentage.

Il suffit donc de définir une largeur pour le wrapper de page, et vous êtes prêt à partir

HTML:

<body>
    <div class="page-wrapper">
        <!-- Your bootstrap grid/page markup here -->
    </div>
</body>

CSS:

.page-wrapper {
    width: 960px; /* Your page width */
    margin: 0 auto; /* To center your page within the body */
}
3
Dennis Johnsen

Le moyen le plus simple est de tout emballer dans un conteneur comme celui-ci.

.container-fixed {
  margin: 0 auto;
  max-width: 960px;
}

http://bootply.com/94943

Ou bien, vous pouvez utiliser LESS/custom build: http://getbootstrap.com/customize/

0
Zim