Bootstrap 3 - 940px de la largeur de la grille?

Je suis en utilisant Bootstrap 3 sur un nouveau projet. La mise en page est un 940px largeur max (ordinateur de bureau, etc), 12 col (60px colonne, 20px gouttière).

J'ai mis .container à un max-width: 940px; mais cela rend la grille, pour une raison quelconque. Cela me donne 50px colonne avec 30px gouttière. J'ai donc besoin de couper la gouttière de 20px et ajouter le 10px à la colonne.

Mais comment dois-je faire?

Bootstrap 3 - 940px de la largeur de la grille?

OriginalL'auteur brother | 2013-10-08

  1. 9

    Utilisation:

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

    Remarque: 970 moins 30px (gouttière) rend 940px pour votre conception.

    mise à jour

    Voir: http://bootply.com/86257

    Set @grille-gouttière de la largeur de 20px; et recompiler bootstrap.

    Dans ce cas, votre .conteneur /.la ligne aura une largeur de 960px. Défini dans variabless.moins:
    @container-desktop: ((940px + @grid-gutter-width));

    Remarque si le réglage de @container-large-desktop: @container-desktop dans des variables.moins je n'ai pas besoin des médias de la requête ci-dessus.

    Oui, mais cela fait encore les colonnes et les caniveaux le mauvais largeur? La conception des specs, je me suis dit une image en 4 colonnes est 300px de large - ce ne serait pas le cas avec la configuration actuelle?
    pourriez-vous ajouter un écran de votre conception? Voir aussi getbootstrap.com/css/#grid le milieu de grille (970) a un max de largeur de colonne de ((970 - gouttière /12)) 78px. 4 x 78 312. y compris de la gouttière. Vous pourriez faire de votre image de sapin par l'ajout de la classe img-responsive peut-être.
    J'ai ajouté une photo de la grille ci-dessus. 940px de largeur. 60px colonnes avec 20px gouttière. Possible?

    OriginalL'auteur Bass Jobsen

  2. 1

    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

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

    Modifier le dernier point d'arrêt à 9999px par exemple, ce qui permettra d'éviter que le point d'arrêt est atteint, de sorte que votre site se chargent toujours de la précédente requête de média: 

    @screen-md:                  992px; //this one has 940px container
@screen-desktop:             @screen-md;

    Pour modifier la largeur de colonne et de gouttière, faites défiler un peu dans le même fichier et recherchez

    //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 configurer

    Et enfin, ofcource compiler bootstrap.moins fichier css.

    Acclamations

    OriginalL'auteur Snade

  3. 0

    Vous devez commentaire de l'article suivant dans le bootstrap.réactive.css pour commencer 940 vue 

    @media (min-width: 1200px) {
}
    Pas sûr de comprendre cette réponse?
    Bootstrap 3 n'ont pas un bootstrap.réactive.fichier css.

    OriginalL'auteur Arun