Bootstrap - pourquoi seulement 12 colonnes?

Pourquoi suis-je limité à 12 colonnes? Pourquoi n'est-il pas, par défaut, de plus, pour plus de flexibilité?

Laissez-moi vous expliquer ce qui me confond. Disons que je veux créer une page simple avec un menu à gauche, et le contenu sur la droite.

<div class="col-sm-3">Left menu</div> <!-- 258px -->
<div class="col-sm-9">Content</div> <!-- 772px -->

<div class="col-sm-4">Left menu</div> <!-- 343px -->
<div class="col-sm-8">Content</div> <!-- 687px -->

Comme on le voit dans l'exemple ci-dessus, la différence entre le sm-3 et sm-4 est presque 100px pour le menu! Si je veux que le menu de 300px, je ne peux pas utiliser la grille. Si j'avais plus de colonnes, je pourrais être plus précis que ça.

Je suis en utilisant le système de grille dans le mauvais sens? Pourquoi la grille divisée en si peu de colonnes?

Lire ceci. Vous pouvez définir un nombre quelconque de colonnes.
Rappelez-vous avec Bootstrap vous pouvez également imbriquer des colonnes qui peut vous donner plus de flexibilité.

OriginalL'auteur Matthew | 2014-03-04

  1. 9

    Si vous ne voulez pas personnaliser le fichier de Bootstrap grille via MOINS, vous pouvez utiliser l'imbrication comme ça..

    16 colonne de la grille: http://www.bootply.com/118737

    24 colonne de la grille: http://www.bootply.com/118739

    alors qu'avec l'imbrication vous pouvez accomplir plus colonnes, cela n'aide pas si vous voulez moins de non-colonnes standard .. dire que si tu veux les 2 colonnes de 15% & 85% respectivement
    oui, mais c'est pas ce que l'OP a demandé
    fait que est ce que l'OP a demandé. 3:9 & 4:8 ratios de ne pas répondre à son besoin. Avec plus de colonnes dans la grille, un preciser ratio serait possible. Différent de celui de l'imbrication des colonnes. Avec l'imbrication vous pourriez obtenir une petite colonne de taille souhaitée, mais pas une seule colonne dans le reste de l'espace

    OriginalL'auteur

  2. 7

    Vous pouvez modifier le nombre de colonnes avec MOINS.

    12 est la valeur par défaut parce qu'il est le plus souple motif de grille sur tous les nombres jusqu'à 12. 

     COLUMNS   | EVEN COLUMNS POSSIBLE
 1 column  = 1 (1x1)
 2 columns = 2 (1x2, 2x1)
 3 columns = 2 (1x3, 3x1)
 4 columns = 2 (1x4, 2x2, 4x1)
 5 columns = 2 (1x5, 5x1)
 6 columns = 4 (1x6, 2x3, 3x2, 6x1)
 7 columns = 2 (1x7, 7x1)
 8 columns = 4 (1x8, 2x4, 4x2, 8x1)
 9 columns = 3 (1x9, 3x3 9x1)
10 columns = 4 (1x10, 2x5, 5x2, 10x1)
11 columns = 2 (1x11, 11x1)

    12 columns = 6 (1x12, 2x6, 3x4, 4x3, 6x2, 12x1)

    La question est: "pourquoi n'est-ce pas le défaut de plus?", pas "pourquoi n'est pas la valeur par défaut moins?". Donc, même si c'est un bon argument pour expliquer pourquoi 12 et pas 8, il n'a pas vraiment de réponse pourquoi vous m'arrêtais à 12 au lieu de 24 ou 100.
    Je pense que cela répond à la question - 12 est un bon nombre pour des calculs rapides, tout en offrant un bon nombre de combinaisons. Si vous essayez d'utiliser le plus grand nombre, disons 14 ou 16 ans comme une base pour les colonnes, vous vous rendrez vite compte qu'il ne peut pas être divisé, aussi facilement que 12.
    "Pourquoi n'est-ce pas le défaut de plus?" La réponse remonte à la grille de 12 colonnes - car avec 12 grilles-vous le plus pour votre argent. Disons que vous avez un 13 colonne de la grille. 13 = 2 (1x13, 13x1) 14 = 4 (1x14, 2x7, 7x2, 14x1) 15 = 4 (1x15, 3x5, 5x3, 15x1) et ainsi de suite.. votre meilleure option est toujours en cours à 12 - je ne suis pas mathmatician, mais je devine tout multiple de 12 va vous donner le plus grand des combinaisons, mais en général vous n'avez pas besoin que beaucoup de colonnes sur une page. Vous avez toujours la possibilité de créer ses propres grilles, mais pour la majorité, 12 va être le plus utile de la grille de montant.

    OriginalL'auteur

  3. 2

    La plupart des versions de Bootstrap utiliser uniquement les 12 colonnes de compte pour les raisons suivantes:

    • Faciliter la mise en page de création de
    • Responsive layout pour les appareils mobiles
    • Proportionnelle "blocs" de tout garder symétrique
    • Simple "User Friendly" thème

    Vous sont corrects. Vous êtes limité à une largeur maximale et la largeur de vos colonnes doivent correspondre à la largeur maximale et ne peut pas dépasser. Cependant, vous n'êtes pas obligés de garder ce que la politique de votre site web.

    Vous pouvez toujours remplacer le CSS et personnaliser la largeur de la colonne de la manière que vous voulez!

    Pour ce faire (et l'honneur de la largeur maximale de votre site web), vous devez d'abord trouver le nombre de pixels pour la plus grande colonne, qui est col-12. Vous pouvez voir que la largeur maximum est 1030px pour votre site web.

    Regardons ce que tu voulais:

    Si je veux que le menu de 300px, je ne peux pas utiliser la grille.

    Vous pouvez réellement faire qu'à l'aide de la grille, dans une certaine mesure. Nous avons juste besoin de mettre le menu à 300px (comme vous l'avez demandé) et de donner le reste de l'espace (1030px - 300px = 730px) au contenu principal.

    Nous avons donc besoin d'une boîte pour 300px et une boîte pour 730px.

    Voici ce que vous pouvez utiliser:

    <div class="col-sm-3" style="width:300px;">Left menu</div> <!-- 300px -->
<div class="col-sm-9" style="width:730px;">Content</div> <!-- 730px -->

    Fondamentalement, vous pouvez modifier votre mise en page proportions pour tout ce que vous voulez. La largeur totale juste besoin de faire correspondre le reste du site. J'espère que ça aide.

    -Dominick

    Si j'ajoute un attribut de style comme vous l'avez suggéré style="width:300px;", alors sur un petit écran (col-xs), la largeur sera toujours 300px, mais il devrait plutôt être la totalité de la largeur de l'écran, parce que nous l'avons spécifié col-sm. Il n'est pas facile, droit? Deuxièmement, Pourquoi est-à 12 colonnes plus facile, et plus sensible que, par exemple, un 24 mise en page en colonnes? 24 peut être divisée par 2, 3, 4, 6, ... et je peux être plus proche de la largeur que je veux, parce que j'ai plus de colonnes. Pourquoi, par défaut, 12?
    Si vous voulez que tout soit proportionnelle (même sur mobile), vous pouvez utiliser des pourcentages au lieu de spécifier 300px. Je dirais donc fixé à 30% pour la gauche-menu, et 70% au contenu principal.
    Eh bien, un 12-mise en page des colonnes était de savoir comment Bootstrap développé leur technique de disposition. Il est plus efficace parce que la mise en page est uniquement destinée à grandir en tant que grand que le corps de la page et réduire de quelques mots. Pour quelque chose de plus petit (telles que les dessins) ou plus grande (tels que les arrière-plans), il serait écrit en CSS ou Javascript.
    C'est OK si le total des colonnes d'une ligne dépasse 12

    OriginalL'auteur

  4. 1

    Veuillez jeter un oeil à https://github.com/Aelios/bootstrap-flexible-grid

    Qui vous permet de personnaliser chaque Bootstrap colonnes de ligne de comptage.

    Merci pour ce bâtiment.

    OriginalL'auteur

  5. 0

    C'est une question intéressante qui, je crois, n'auront jamais de réponse définitive (sans tout un tas d'enquête) car apparemment il n'est pas officiel doc.

    La plupart des raisons que j'ai trouvé sont en fait après le fait justifications /post hoc ergo propter hoc à mon humble avis.

    Peut-être que quelqu'un vient intuitivement décidé qu'il était un bon défaut, à moins que cela pouvait sentir trop peu, plus trop, et le nombre 12 est très familier à tout le monde (12 mois, 12 heures avant midi et après 12... etc)

    Aussi loin que je peux voir, c'était probablement un subconscient décision d'utiliser le duodécimal système de numération

    OriginalL'auteur