Pourquoi bootstrap .row a-t-il une marge par défaut de -30px?

Question

Quand je fais de bootstrap, j'ai utiliser la classe "ligne" ...

Quand vous regardez mon test de conception:

Pourquoi je suis forcé avec un margin-left de -30px?

Avec ce code html je m'attends à 3 lignes de partage de chaque colonne de 33% de l'ensemble de la largeur disponible:

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

La zone grise avec les boutons est à partir de ce code:

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: 'entrance' } -->
    <!-- /ko -->
</div>

1. Pourquoi l'ensemble des 3-conception de la colonne de chute lorsque je supprimer l'-30px marge de gauche?

2. Comment dois-je modifier mon code pour vraiment obtenir un 3 colonnes, chaque colonne ayant la même largeur. C'est ce que span4 devrait le faire.

Answer 1

question 1:

l' spans tous ont un margin-left de 30px pour créer un peu d'espace entre les blocs individuels. cet espace ne doit apparaître entre le single spans et pas au début (ou la fin) de l' row. pour ce faire, il existe plusieurs possibilitys - par exemple:

• créer un négatif margin avec l'espace avec sur la ligne (c'est ce que bootstrap n')
• utiliser l' :first-child sélecteur de supprimer la marge de gauche sur la première span dans une rangée
• [dans la suite]

je ne peux que supposer que le bootstrap utilise la première option parce que c'est mor compatible avec les navigateurs plus anciens (les plus susceptibles IE 7 et ci-dessous).

un petit exemple: disons que votre spans ont une largeur de 100, un espace de 10 et il y a 3 dans une rangée.

• le total de votre ligne de la largeur dans ce cas doit être 320 (100 + 10 + 100 + 10 + 100 = 320)
• une seule travée a une largeur de 110 (100 largeur + 10 magin-gauche)
  • simplement en ajoutant ceux-ci vous donnent une largeur de 330 et une vilaine espace de 10 au début (10 + 100 + 10 + 100 + 10 + 100 = 330)
  • "soustraire" 10 avec l'une des méthodes énumérées (-10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
    • hourra, nous avons créé de grandes choses avec la puissance de mathématiques

question 2 si vous utilisez span4s, vous avez déjà 3 colonnes de même largeur. vous n'avez pas besoin de changer quoi que ce soit.

Answer 2

Classe row ajoute un

1. clearfix
2. négatif margin-left
3. négatif margin-right

Bootply : http://www.bootply.com/120858

Avec une marge négative au début:

 <div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
 

Sans marge négative au début:

 <div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
 

Answer 3

Parce que vous n'avez plus besoin d'utiliser de row-fluid. Tout ce que la ligne fait, c'est effectuer le nettoyage et appliquer la marge négative. Ceci est généralement correct pour un système de grille précis. Vous pouvez utiliser des conteneurs ou au lieu d'utiliser "row", vous utilisez simplement "clearfix" et vous obtiendrez exactement le même comportement qu'avant, sans marge.

Answer 4

Si vous êtes en mode fluide et utilisez moins, un mix est très utile: .offsetFirstChild (@columns)

(voir mixin.less de Bootstrap)

Answer 5

Utilisez jQuery:

 $('<div>Test</div>').addClass('row').css("margin-left", 0).css("margin-right", 0).appendTo('.content');