Bootstrap 3 - réduire la taille de gouttière

Question

Ce que je veux réaliser est:

Alors que jusqu'à présent, il ressemble à ceci (les marges du bas ne sont pas la question, j'ai décidé qu'ils devraient être plus petits):

Malheureusement, la taille de la gouttière sont basées sur le rembourrage qui est marqué comme la partie gris dans l'image vers le haut. Je voudrais que chaque partie ait la même taille: 15 px.

La partie du code que je fais référence est (où les groupes marge ensembles de marge inférieure pour chaque bouton):

<div class="row"> 
       <div class="col-sm-6 groups-margin"> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a> 
       </div> 
       <div class="col-sm-6 groups-margin"> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a> 
        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a> 
       </div> 
      </div> 

Answer 1

Enveloppez votre col-sm-6 avec un div, disons .input-row comme ceci:

<div class="row"> 
    <div class="input-row"> 
       <div class="col-sm-6 groups-margin"> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a> 
       </div> 
       <div class="col-sm-6 groups-margin"> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a> 
         <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a> 
       </div> 
    </div> 
</div> 

maintenant, puisque vous utilisez col-sm-, ajoutez ces propriétés dans une requête de médias comme ceci:

@media (min-width: 768px){ 
    .input-row .col-sm-6:first-child{padding-right:7.5px;} 
    .input-row .col-sm-6:last-child{padding-left:7.5px;} 
} 

maintenant toutes les gouttières (gauche, droite et centrale sera 15px)

---

Voici un jsFiddle avec les codes ci-dessus: http://jsfiddle.net/AndrewL32/65sf2f66/47/

Answer 2

Si vous voulez augmentation de la taille de gouttière seulement cette section, vous pouvez faire classe pour cela.

.btn .gutter{ 
    margin-bottom: 5px; 
} 

et vous pouvez simplement ajouter gouttière avec les classes

<a class="btn btn-primary btn-md gutter">some button</a> 

Answer 3

J'aime créer des classes de lignes plus spécifiques, laissant intacte de Bootstrap. Donc, je peux avoir quelque chose comme ceci:

.row-half-gutter { 
    margin-right: (@grid-gutter-width/2) * -1; 
    margin-left: (@grid-gutter-width/2) * -1; 

    > [class*="col-"] { 
    padding-right: (@grid-gutter-width/4); 
    padding-left: (@grid-gutter-width/4); 
    } 
} 

.row-no-gutter { 
    margin-right: 0; 
    margin-left: 0; 

    > [class*="col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    } 
}