La modification de la marge sur Bootstrap 3 pour conteneur

J'ai un site en utilisant le bootstrap cadre et je veux changer l'extérieur des marges par défaut pour les fichiers d'amorce de l' '.conteneur de classe.

Je veux les marges plus étroites sur les côtés extérieurs, et je veux pas sauter de différentes tailles en fonction de l'écran/résolution (Pour ceux qui utilisent Bootstrap, lorsque l'écran est d'une certaine taille .classe de conteneur passe automatiquement à un ensemble différent de marges.)

Je veux juste une marge constante tout au long de que je peux.

InformationsquelleAutor user3550879 | 2015-08-02
  1. 8

    Vous pouvez simplement remplacer le CSS. Cependant, vous devriez éviter de modifier les fichiers d'Amorçage directement, ce qui limite votre capacité à mettre à jour la bibliothèque. Placez votre propre, CSS personnalisé après Bootstrap, et de le modifier comme vous le voulez.

    En outre, essayez d'utiliser SASS ou MOINS et la création d'une variable pour votre marges/rembourrage. Ensuite, vous pouvez réutiliser la variable pour les différents points d'arrêt ou des conteneurs personnalisés, et un seul point pour modifier les marges/rembourrage plus tard.

    Une autre bonne idée est de modifier vos contenants avec une classe personnalisée, de sorte qu'à l'origine, les styles sont conservés. Par exemple:

    <style type="text/css">
    .container.custom-container {
      padding: 0 50px;
    }
</style>

<div class="container">
  Here's a normal container
</div>

<div class="custom-container container">
  Here's a custom container
</div>
    • Je ne suis pas familier avec SASS ou MOINS, juste un débutant. problème c'est que j'ai essayé d'utiliser .conteneur { margin: 0 10px; } mais il est passé tout à gauche
    • Je ne sais pas si vous parlez de marges ou de rembourrage. La façon dont vous êtes en expliquant qu'il sonne comme le rembourrage est le problème. L' .classe de conteneur a des marges gauche et droite définie sur auto, ce qui est la façon dont il est centré pour la moyenne de point d'arrêt et au-dessus. Si vous remplacez la marge gauche/droite avec 10px, comme vous le dites ci-dessus, il vous permettra de détruire les effet de centrage.
    • Je voudrais aussi dire un grand appel à l'aide de Bootstrap est d'avoir la poignée de tailles d'écran différentes gracieusement. Si cela ne vous intéresse pas, vous ne voulez pas utiliser le cadre pour commencer, et il suffit d'écrire votre propre feuille de style CSS.
    • Bootstrap fonctionne très bien, sauf si votre site a beaucoup d'éléments de bloc. à certaines tailles d'écran les 'blocs' iront droit vers le bord de la fenêtre, puis un pixel plus petit et il saute à 100px de rembourrage sur les côtés. Je l'utilise plus pour le .colonne de fonctionnalités
    • si votre utilisation est l'extension de conteneur de classe de bootstrap, en d'autres termes, la coutume-conteneur hérite de conteneur, droit?
    • c'est une façon de penser... mais gardez à l'esprit CSS fonctionne via la spécificité des règles, avec des règles plus spécifiques prenant le pas sur les moins spécifiques. Ainsi, dans l'exemple de valeur supplémentaire de CSS dans le .container.custom-container bloc, a la capacité d'annuler les styles définis par Bootstrap pour le .container classe. Pour en savoir plus: developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    InformationsquelleAutor benjarwar
  2. 0

    Créer un fichier css de votre propre et de le joindre après bootstrap.css (ne pas surcharger le css par défaut), et de modifier ce que vous voulez (inclure !important à votre attribut si nécessaire).

    • Étroit sur l'extérieur, le changement "padding-left " et "padding-right " de la classe conteneur (ou container-fluid) pour s'adapter à votre volonté (par défaut pour les deux rembourrage est 15px)
    • De fixer la largeur de la bande, vous pouvez inclure 'width: 1000px " (ou whtever nombre (pourcentage) vous voulez) à 'conteneur " classe
    InformationsquelleAutor Henry Varro
  3. 0

    Dans le bootstrap 4, container-fluid donne une pleine largeur du conteneur

    InformationsquelleAutor md1630
  4. -1

    "width: 100%" a fait le tour pour moi.

    InformationsquelleAutor giles3