Comment supprimer l'espace de gouttière pour une div spécifique seulement - bootstrap

Question

La valeur par défaut de Bootstrap système de grille utilise 12 colonnes avec chaque travée avoir 30px gouttière comme ci-dessous. Les gouttières sont le blanc, l'espace entre les colonnes. Largeur de gouttière semble être entre 20px - 30px. Supposons que c'est 30px ici.

Je veux retirer la gouttière de l'espace pour un div, de sorte qu'il n'y aura pas de gouttière de l'espace dans la ligne. Chaque travée sera unes à côté des autres sans gouttière.

Le problème est que si je supprime la marge 30px(gouttière), il part 360px(12*30) à la fin de la ligne.

Étant donné que je veux retirer de la gouttière de l'espace pour un div seulement. Supposons que c'est pour les div qui sont dans l' main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

Comment puis-je supprimer le caniveau pour un div sans perdre bootsrap réactivité et de ne pas laisser d'espace à la fin de la ligne?

Answer 1

Si quelqu'un en a besoin pour Bootstrap 3, c'est beaucoup plus facile. Bootstrap 3 utilisait maintenant un remplissage à la place des marges pour créer la "gouttière".

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
 

Ensuite, ajoutez simplement no-gutter à toutes les lignes dans lesquelles l’espacement doit être supprimé:

   <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>
 

Démo: http://bootply.com/107708

Answer 2

** Pas de Twitter BS 3 **

Nous sommes à la recherche à la classe .span1 ici (une colonne sur 12 de large grille), mais vous pouvez obtenir ce que vous voulez en retrait de la marge de gauche à partir de:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

Puis, changeant .row-fluid .span1's largeur égale à 100% divisé par 12 colonnes (8.3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

Vous pouvez le faire en ajoutant une classe supplémentaire qui vous permettra de quitter la grille de la base du système intact:

.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }

<div class="row-fluid show-grid">
    <div class="span1NoGutter">1</div>
</div>

Vous pourriez répéter ce modèle pour toutes les autres colonnes, ainsi:

.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }

* EDIT (en insistant sur l'utilisation de la grille par défaut)
Si la grille par défaut du système est une exigence, la valeur par défaut à une largeur de 940px (l' .conteneur et .span12 classes, qui est); ainsi, en termes plus simples, vous voulez diviser 940 par 12. Ce qui équivaut à 12 conteneurs 78.33333 px de large.

Donc à 339 du bootstrap.css pourrait être modifié comme suit:

.span1 { width:78.33333px; margin-left:0 }
  or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)

Answer 3

Twitter Bootstrap propose un personnaliser le formulaire à télécharger tout ou certains des composants avec une configuration personnalisée.

Vous pouvez utiliser ce formulaire pour télécharger une grille sans les gouttières, et il sera réactif - vous seulement besoin de la grille du composant et de la réactivité sur la largeur.

Démo (jsfiddle)

Si vous connaissez un peu MOINS, alors vous pouvez inclure le CSS généré dans un sélecteur de votre choix.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

Si non, vous devez ajouter le sélecteur en face de chaque règle (pas tant que ça de toute façon).

---

Si vous connaissez MOINS et d'utiliser le MOINS de scripts pour gérer vos styles, vous pouvez utiliser directement la Grille de mixin (github)

Answer 4

La largeur totale est calculée avec la largeur des éléments plus la largeur de la marge. Si vous souhaitez supprimer l'espace de marge, c'est très bien, mais pour éviter l'espace que vous avez mentionné, vous devez également augmenter la largeur des colonnes.

Dans ce cas, vous devez augmenter la largeur d'une seule colonne de la marge supprimée, qui serait de 30 pixels.

Supposons donc que la largeur de vos colonnes est de 50 pixels normalement, avec une marge de 30 pixels. Supprimez la marge et faites la largeur 80PX.

Answer 5

Exemple 4 colonnes de span3. Pour les autres largeurs de portée, utilisez nouvelle largeur = ancienne largeur + taille de gouttière. Utilisez les requêtes des médias pour le rendre réactif.

css:

     <style type="text/css">
    @media (min-width: 1200px) 
    {   
        .nogutter .span3
        {
            margin-left: 0px; width:300px;
        }   
    }
    @media (min-width: 980px) and (max-width: 1199px) 
    { 
        .nogutter .span3
        {
            margin-left: 0px; width:240px;
        }   
    }
    @media (min-width: 768px) and (max-width: 979px) 
    { 
        .nogutter .span3
        {   
            margin-left: 0px; width:186px;
        }   
    }
    </style>
 

html:

 <div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>
 

update : ou diviser un span12 div en 100 / numberofcolumns% width parts flottant à gauche:

 <div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>  
 

Pour les deux solutions, voir: http://bootply.com/61557