Comment garder l'espace entre les trois colonnes dans le Bootstrap?

J'ai fait un peu de recherche ici sur Stackoverflow sur la façon de résoudre ce problème de manière efficace, mais je n'ai toujours pas semblé trouver exactement ce que je cherche.

En gros, j'ai trois colonnes que je veux uniformément espacés et centré sur ma page. Cependant, lorsque j'ai mis le col-md-4 pour l'ensemble des trois colonnes, le résultat final est qu'ils sont tous trois regroupés les uns aux autres. Comment puis-je faire en sorte qu'il y a de l'espace entre les colonnes? 10-15px ou alors sans forcer sur une autre ligne.

Voici un exemple de code:

<div class="row-fluid">
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
</div>

Peut-être que je suis juste fait quelque chose de mal mais je n'arrive pas à comprendre comment faire ce travail. J'ai vu plusieurs personnes suggèrent de mettre juste dans une autre div avec du rembourrage, mais qui ne semble pas fonctionner pour moi.

Merci pour toute aide! Je suis ouvert à toutes suggestions!

Il devrait y avoir des espaces entre les col-**-n éléments. col-**-n classe a défaut ensembles de padding-left et padding-right et le montant est fixé par 15px. Puissé-je voir votre propre feuille de style css?
Double Possible de twitter bootstrap système de grille. L'espacement entre les colonnes

OriginalL'auteur Quiver | 2015-05-12

  1. 7

    En fait, votre code déjà crée des espaces entre les colonnes, parce que dans le fichier de démarrage de la colonne a 15px rembourrage de chaque côté.

    Votre code fonctionne normalement, vérifiez ici: http://www.bootply.com/H6DQGdZxGy

    Mais vous pouvez voir qu'il ne fonctionne pas comme je le souhaite par le présent code: bootply.com/uTaX6ASnHj Mes colonnes ont différentes couleurs d'arrière-plan de sorte que la colonne elle-même est "visible". Ainsi, dans l'exemple ci-dessus, je voudrais voir le blanc de l'espace entre les colonnes.
    vous devez définir le style de l'arrière de la <p> qui est à l'intérieur de la colonne, la colonne elle-même. <p style="background-color:black">...</p>
    Qui était-il! Une erreur de débutant. Merci pour votre aide!
    Vous êtes les bienvenus.

    OriginalL'auteur Shadi Namrouti

  2. 2

    C'est une réponse tardive mais je suppose que certaines personnes peuvent être interessed par une autre explication.
    Bootstrap "cols" du système n'est pas faite pour décorer, mais pour placer des éléments dans les pages. Si vous avez besoin d'espace le contenu d'une colonne, vous devez emballer votre contenu:

    <div class="row-fluid">
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
    <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>     
</div>

    Ensuite, vous pouvez ajouter un espacement ".col interligne" en utilisant le rembourrage

    .col-spaced {
     margin-left: 15px
}

    Noter que:

    • marge va vous changer la taille des colonnes, car le col-* doit être placé à l'égard de la colonne mise en page
    • vous pouvez avoir besoin de changer de col-* et prénom de l'enfant pour résoudre certains problème

    OriginalL'auteur Metal3d

  3. 1

    Vous avez la possibilité d'utiliser la colonne de compensation col-md-offset-*. Vous ne seriez pas en mesure de maintenir l'espacement de vos colonnes (réduire de 4 à 3), mais je crois qu'il devrait un peu faire le travail pour répondre à l'espacement.

    Check this out: twitter bootstrap système de grille. L'espacement entre les colonnes

    Ne serait-ce pas provoquer les colonnes d'être hors-centre de bien? Si vous connaissez un moyen de centrer tout y compris les compensations alors laissez-moi savoir! Je suis encore nouveau pour tout cela!
    Le plus serait à coup sûr. Vous serait essentiellement pour l'ajout d'un décalage de chaque côté afin de recevoir votre effet désiré. Voyant que votre question se réfère à beaucoup moins d'effet que le décalage est nécessaire, je dirais shadi1024 réponse vous convient très bien.

    OriginalL'auteur OscillatingMonkey

  4. 0

    Un "hacky" façon de faire ce que vous voulez, c'est donner les colonnes d'une frontière qui est de la même couleur que le fond.

    OriginalL'auteur plushyObject

  5. 0

    Vous pouvez faire quelque chose comme:

    [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

[class*="col-"]:first-child {
  padding-left: 0px;
}

[class*="col-"]:last-child {
  padding-right: 0px;
}

    Vous pouvez ajouter un contenu à l'envelopper, sinon vous allez avoir ces règles s'appliquent à toutes les colonnes de la mise en page!

    .spaced-columns [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

    Alors vous pouvez utiliser:

    <div class="spaced-columns">
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
</div>

    ou vous pouvez créer une classe comme: spaced-col puis ajouter un rembourrage:

    .spaced-col {
  padding: 0px 10px;
}

    et puis vous appliquez cette classe sur votre cols

    <div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>

    De sorte que vous aurez votre espace comme vous le souhaitez 🙂

    Acclamations

    Il n'a pas demandé un réactif de l'espacement, il a dit "l'ordre de 10-15px ou alors sans forcer sur une autre ligne."
    Et, si il veut un réactif margin/padding, il suffit de modifier le 15/10px % trop 🙂

    OriginalL'auteur dpedoneze

  6. 0

    Si vous utilisez un rembourrage et de changer la couleur d'arrière-plan, vous pouvez remarquer que les couleurs de colonnes n'ont pas beaucoup d'espacement entre eux.
    Peut-être une meilleure option serait

        .col-md-4 {
        margin-left: 5px;
    }

    OriginalL'auteur Imran Niloy

  7. 0

    Vous pouvez mettre une autre div pour placer votre contenu à l'intérieur de l' .col div, comme l'exemple ci-dessous:

    <div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
     </div>
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
    </div>
  </div>
</div>

    Le constater ici: https://codepen.io/pmfeo/pen/RVxPXg

    Que la div s'adapter à celle du parent rembourrage.

    OriginalL'auteur Pablo