Bootstrap 3 - définition du Conteneur Largeur de 940px Maximum pour les Ordinateurs de bureau?

Je suis l'ajout d'une nouvelle section d'un site web en utilisant Twitter Bootstrap 3, mais le conteneur ne peut pas aller plus large que 940px au total pour ordinateur de Bureau - comme il le fera jeter l'en-Tête et Pied de page {inclut}.

Donc 940px œuvres à 12 x 60 = 720px pour les colonnes et les 11 x 20 = 220px pour les gouttières. Assez juste, mais comment voulez-vous entrée dans Bootstrap 3 comme il n'y a pas de " @ColumnWidth champ/réglage de la Personnaliser section?

J'ai essayé par le réglage de la @conteneur-lg-bureau et @conteneur de bureau à la fois pour 940px - mais il ne fonctionne pas.

InformationsquelleAutor ubique | 2013-10-17
  1. 16

    En premier lieu d'envisager la Petite grille, voir: http://getbootstrap.com/css/#grid-options. Un conteneur max largeur de 750 px sera peut-être à petit pour vous (lire aussi: Pourquoi ne Bootstrap 3 force de la largeur du conteneur à certaines dimensions?)

    Lors de l'utilisation de la Petite grille d'utiliser les media queries pour définir le max-conteneur largeur:

    @media (min-width: 768px) {
    .conteneur {
    max-width: 750px;
    }
    }

    Deuxième aussi lire cette question: Bootstrap 3 - 940px de la largeur de la grille?, double possible?

    12 x 60 = 720px pour les colonnes et les 11 x 20 = 220px

    il y aura également une gouttière de 20px sur les deux côtés de la grille, de sorte 220 + 720 + 40 fait 980px

    il n'y a pas de " @ColumnWidth

    Vous en colonnes largeur sera calculé dynamiquement en fonction de vos paramètres dans des variables.de moins en moins.
    vous pouvez définir @grid-columns et @grid-gutter-width. La largeur d'une colonne est définie comme un pourcentage de la via de 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.

    • La Petite Grille est trop petite pour ce projet en tant que de besoin pour atteindre 940px le même que le reste du site. Votre référence à un "duplicata" - j'ai essayé avant de poster ma question et il ne permet pas de résoudre le problème? Thx.
    • voir mise à jour ci-dessus
    • Hi - peu confus, ici!? Vous avez "conteneur-desktop", écrit deux fois, l'une avec une valeur de 940px et l'autre sans?
    • oui, vous avez à mettre en @container-large-desktop à la même valeur que ` @conteneur de bureau " pour 940px ou @container-large-desktop: @container-desktop. Ce qui signifie la même chose que @container-large-desktop = @container-desktop
    • J'ai déjà essayé le réglage de la "container-desktop" & "conteneur-grand-desktop" pour 940px - et il ne fonctionne pas. Je me demande si les "Media queries points d'arrêt" sont d'avoir un impact??
    • pouvez-vous me montrer un exemple?
    • Merci pour votre aide sur ce sujet, j'ai trouvé que mon style de modèle.le css a été au mépris de l' .conteneur largeur que le lien ci-dessus, le fichier de bootstrap.css dans le '<head>'.

    InformationsquelleAutor Bass Jobsen
  2. 91

    Il est beaucoup plus facile de solution (OMI) dans le Bootstrap 3 qui ne vous obligent pas à compiler tous les MOINS. Vous avez juste à tirer parti de la cascade dans les "Feuilles de Style en Cascade."

    Configurer votre CSS de chargement comme si...

    <link type="text/css"  href="/css/bootstrap.css" />
<link type="text/css"  href="/css/custom.css" />

    Où /css/custom.css est votre unique définitions de style. L'intérieur de ce fichier, ajouter la définition suivante...

    @media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}

    Cela va remplacer Bootstrap par défaut de width: 1170px paramètre lorsque la fenêtre est 1200px ou plus.

    Testé dans le Bootstrap 3.0.2

    • Comment dois-je faire quand j'ai besoin de toutes les déclarer dans le fichier css, par exemple à l'intérieur CodePen? Il ne semble pas fonctionner, même avec la !important tag.
    • Si tout ce qui existe dans un seul fichier, je crois que vous pouvez le faire fonctionner simplement en veillant à ce que les définitions que j'énonce ci-dessus pour custom.css fin à la fond du fichier. Qui doit s'assurer qu'ils obtiennent les dernières appliquées. Pas testé, YMMV.
    • J'ai testé que dans le CodePen, sans succès malheureusement. Je vais essayer de la comprendre, je vous remercie pour votre réponse.
    • Je pense que cela devrait être "max-width: 970px;"
    • non, il ne devrait pas -- github.com/twbs/bootstrap/blob/master/dist/css/...
    • Vous avez raison. Merci pour le lien.

    InformationsquelleAutor Frank Koehl
  3. 6

    La meilleure option est d'utiliser le MOINS original de la version de bootstrap (l'obtenir à partir de github).

    Ouvrir variables.moins et look pour //Media queries points d'arrêt

    Trouver ce code et de modifier le point d'arrêt de la valeur:

    //Large screen /wide desktop
@screen-lg:                  1200px; //change this
@screen-lg-desktop:          @screen-lg;

    Changer de 9999px par exemple, et cela permettra d'éviter le point d'arrêt est atteint, de sorte que votre site sera toujours en charge de la précédente requête de média qui a 940px conteneur

    InformationsquelleAutor Snade
  4. 5

    Si vous ne voulez pas compiler bootstrap, copier le code et de l'insérer dans votre fichier css spécifique. Il est recommandé de ne pas modifier l'original bootstrap fichier css. Aussi, vous ne serez pas en mesure de modifier le fichier de bootstrap css d'origine si vous le chargez à partir d'un cdn.

    Collez ceci dans votre fichier css spécifique:

    @media (min-width:992px)
    {
        .container{width:960px}
    }
@media (min-width:1200px)
    {
        .container{width:960px}
    }

    Je suis ici pour configurer mon conteneur à 960px de tout ce qui peut l'accommoder, et en gardant le reste des tailles de supports à leurs valeurs par défaut. Vous pouvez le configurer pour 940px pour ce problème.

    InformationsquelleAutor Mohamed Elgharabawy
  5. 1

    Si si ne fonctionne pas, alors utiliser "!Important"

    @media (min-width: 1200px) {
    .conteneur {
    largeur: 970px !important;
    }
    }

    InformationsquelleAutor ziaprog