La façon de traiter avec Bootstrap 3 colonnes ont pas d'écart?

Je suis en difficulté avec de nouveaux Bootstrap 3 système de grille. Je voudrais créer 4 colonnes de la grille. Alors, voici mon code:

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

Mon problème est que il n'y a pas d'écart entre les colonnes. La grille s'applique padding-left et padding-right à colonnes au lieu de margin-left et margin-right.

Quand j'ai enlever le rembourrage et ajouter de la marge, Il s'effondre. Comment vais-je résoudre ce problème? ou Est-il quelque chose que je ne pouvais pas comprendre?

Vous pouvez vous référer à ma réponse sur une question similaire. Espérons que cette aide. stackoverflow.com/questions/18738712/...

OriginalL'auteur Ali Emre Çakmakoğlu | 2013-08-15

  1. 11

    Si vous ne pouvez pas utiliser la valeur par défaut de rembourrage pour créer des espaces, vous devez ajouter `margin-left' dans les colonnes appropriées, et aussi modifier le % de largeur.

    Par exemple .col-lg-4 a généralement 33% de la largeur, donc, si vous voulez la réduire un peu..

    .col-lg-4 {
    margin-left:15px;
    width:31.6%;
}

    http://bootply.com/74374

    Une autre option serait d'utiliser un conteneur à l'intérieur des colonnes, puis le remplissage se chargera de créer les lacunes.

    Merci pour la réponse. À l'aide d'un conteneur est la meilleure solution.
    Wow facile et sournois, merci!

    OriginalL'auteur Zim

  2. 5

    plus précis de la largeur de la colonne, vous pouvez utiliser le css3 calc() de l'opérateur 

    .col-lg-4 {
    margin-left:15px;
    width:31.6%; /* non-css3 fallback */
    width: calc( 33.33333333% - 15px ); /* css3 calculation */
}

    OriginalL'auteur Karl Adler

  3. 2

    Vous avez besoin pour contenir un ligne dans un .conteneur DIV. Sinon Bootstrap comprend il devrait y avoir aucun écart entre les colonnes.

    Merci pour cette trop.

    OriginalL'auteur Julián Abal

  4. 1

    J'ai posté cette ici déjà mais il est toujours pertinent pour la question d'origine et fournit plus d'informations sur la façon dont cette approche fonctionne.

    J'ai eu des problèmes similaires avec de l'espace entre les colonnes. La racine du problème est que les colonnes dans le bootstrap 3 et 4, utiliser un rembourrage au lieu de la marge. De sorte que les couleurs de fond pour les deux colonnes adjacentes toucher les uns les autres.

    J'ai trouvé une solution qui correspondent à notre problème et sera plus susceptible de fonctionner pour la plupart des gens qui essaient de l'espace des colonnes et maintenir la même gouttière largeurs que le reste du système de grille.

    C'était le résultat final que nous avons été pour

    La façon de traiter avec Bootstrap 3 colonnes ont pas d'écart?

    Avoir l'écart avec une ombre entre les colonnes est problématique. Nous ne voulons pas d'espace supplémentaire entre les colonnes. Nous voulions juste les gouttières pour être "transparent", de sorte que la couleur de fond du site apparaît entre les deux colonnes blanches.

    c'est le balisage pour les deux colonnes

    <div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

    CSS

    .raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; //for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ //this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    //this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

    Cette approche exige un intérieur div avec des marges négatives comme la "ligne" de la classe de bootstrap utilise. Et cette div, nous l'avons appelé "pose de bloc", doit être directe, de frère, d'une colonne

    De cette façon, vous obtenez toujours bon rembourrage à l'intérieur de vos colonnes. J'ai vu des solutions qui semblent fonctionner par la création de l'espace, mais, malheureusement, les colonnes, ils créent un rembourrage supplémentaire sur chaque côté de la ligne de sorte qu'il finit par rendre la ligne plus mince que la grille de mise en page a été conçue pour. Si vous regardez l'image pour le look désiré, cela signifierait que les deux colonnes ensemble serait plus petite que celle du plus grand sur le dessus qui casse la structure naturelle de la grille.

    L'inconvénient majeur de cette approche est qu'elle nécessite un surcroît de balisage d'emballage le contenu de chacune des colonnes. Pour nous, cela fonctionne parce que des colonnes spécifiques ont besoin d'espace entre eux pour obtenir le look désiré.

    Espère que cette aide

    OriginalL'auteur Joe Fitzgibbons