Bootstrap: comment puis-je changer la largeur du conteneur?
J'ai utilisé Twitter Bootstrap pour développer un site Web avec la classe conteneur fixe, mais maintenant le client veut que le site Web soit de largeur 1000px et non 1170px. Je n'utilise pas le .moins de fichiers.
Est-il un moyen rapide de résoudre ce problème?
7 réponses
Allez dans la section personnaliser sur le site Bootstrap et choisissez la taille que vous préférez. Vous devrez définir @gridColumnWidth et @gridGutterWidth variables.
Par exemple: @gridColumnWidth = 65px et @gridGutterWidth = 20px résultats sur un 1000px mise en page.
Ensuite, téléchargez-le.
Voici la solution :
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
L'avantage de faire cela, par rapport à la personnalisation du Bootstrap comme dans la réponse @bastardo's, est qu'il ne change pas le fichier Bootstrap. Par exemple, si vous utilisez un CDN, vous pouvez toujours télécharger la plupart des Bootstrap à partir du CDN.
Vous attachez un avait derrière votre dos en disant que vous n'utiliserez pas les fichiers LESS. J'ai construit mon premier thème Twitter Bootstrap en utilisant 2.0, et j'ai tout fait en CSS-en créant un override.fichier css. Il a fallu des jours pour que les choses fonctionnent correctement.
Maintenant, nous avons 3.0. Permettez-moi de vous assurer qu'il faut moins de temps pour apprendre moins, ce qui est assez simple si vous êtes à l'aise avec CSS, que de faire toutes ces remplacements CSS fous. Faire des changements comme celui que vous voulez est un morceau de gâteau.
Dans Bootstrap 3.0, la classe conteneur contrôle la largeur et tous les styles contenus s'ajustent pour remplir le conteneur. Les variables de largeur de conteneur sont au bas des variables.moins fichier.
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-lg-desktop: ((1020px + @grid-gutter-width));
Certains sites n'ont pas assez de contenu pour remplir l'affichage 1020 ou vous voulez un cadre plus étroit pour des raisons esthétiques. Parce que BS utilise une grille à 12 colonnes, j'utilise un multiple comme 960.
@mcbjam a déjà donné cette réponse mais voici un peu plus d'explication.
Vous pouvez facilement effectuer la modification en utilisant une requête multimédia dans votre fichier CSS sans télécharger BS. Je viens de le faire et cela fonctionne magnifiquement.
La valeur "min-width" de la requête multimédia indiquera à CSS de changer la largeur de votre conteneur à 1000px uniquement sur les écrans de plus de 1200px (ou quelle que soit la largeur que vous choisissez d'inclure). Cela préserve la réactivité de votre site, donc lorsque la taille de l'écran sauts en dessous de cette valeur (Petit Moniteur, Tablette, smartphone, etc.), votre site sera toujours ajuster pour s'adapter aux petits écrans.
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
Définissez votre propre classe de conteneur de contenu avec la propriété 1000px width, puis utilisez la classecontainer-fluid boostrap au lieu de container.
Fonctionne mais pourrait ne pas être la meilleure solution.
Utilisez un sélecteur de wrapper et créez un conteneur ayant une largeur de 100% à l'intérieur de ce wrapper pour encapsuler la page entière.
<style>#wrapper {width: 1000px;}
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
<div class="container">
<div class="row">....
Maintenant, la largeur maximale est définie sur 1000px et vous n'avez pas besoin de moins ou de sass.
Ajoutez ces morceaux de CSS dans votre style css. Il est préférable d'ajouter ceci après l'ajout du fichier CSS bootstrap afin d'écraser le même.
html, body {
height: 100%;
max-width: 100%;
overflow-x: hidden;
}`