web-dev-qa-db-fra.com

Supprimer l'espace de gouttière pour une div spécifique uniquement

Le système de grille par défaut Bootstrap) utilise 12 colonnes, chaque étendue ayant 30px Gouttière comme ci-dessous. Les gouttières sont l'espace blanc entre les colonnes. La largeur de la gouttière semble être comprise entre 20px - 30px. Supposons que c'est 30px ici.

enter image description here

Je veux supprimer l'espace de gouttière pour un div spécifique, afin qu'il n'y ait pas d'espace de gouttière dans la ligne. Chaque travée sera côte à côte sans gouttière.

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

Étant donné que je veux supprimer l’espace de gouttière pour un div spécifique uniquement. Supposons que c'est pour divs qui sont dans le main_contentdiv.

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

Comment puis-je supprimer la gouttière pour un div sans perdre la réactivité Bootstrap) et ne pas laisser d'espace à la fin de la ligne?

csstwitter-bootstrapbootstrap-4
66
Techie

Pour Bootstrap 3.0 ou supérieur, voir cette réponse

Nous ne cherchons ici que la classe .span1 (Une colonne sur une grille de 12 largeurs), mais vous pouvez obtenir ce que vous voulez en supprimant la marge de gauche de:

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

Ensuite, changer la largeur de .row-fluid .span1 Pour qu'elle soit égale à 100% divisée par 12 colonnes (8.3333%).

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

Pour ce faire, vous pouvez ajouter une classe supplémentaire qui vous permettrait de laisser le système de grille de base 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 pouvez également répéter ce modèle pour toutes les autres colonnes:

.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 (insistant pour utiliser la grille par défaut)
Si le système de grille par défaut est une exigence, sa largeur par défaut est de 940px (c'est-à-dire les classes .container et .span12); ainsi, en termes simples, vous voudriez diviser 940 par 12. Cela équivaut à 12 conteneurs de 78.33333px de large.

Ainsi, la ligne 339 de bootstrap.css pourrait être modifiée 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)
36
Dawson

Mise à jour 2018

Pour Bootstrap 3 , c'est beaucoup plus facile. Bootstrap 3 utilise 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 où 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

Bootstrap 4 (pas de CSS supplémentaire nécessaire)

Bootstrap 4 comprend un no-gutters classe pouvant être appliquée à l'ensemble row:

http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

Il existe également de nouveaux spacing utils qui permettent de contrôler le remplissage/les marges. Cela peut donc être utilisé pour changer le remplissage (Gutter) d'une seule colonne (ie: <div class="col-3 pl-0"></div>) définit padding-left:0; sur la colonne ou utilisez px-0 pour supprimer les marges intérieure et gauche (axe des abscisses).

141
Zim

Mise à jour: lien pour TWBS 3 getbootstrap.com/customize/#grid-system

Twitter Bootstrap offre un personnaliser le formulaire pour télécharger tout ou partie des composants avec une configuration personnalisée.

Vous pouvez utiliser ce formulaire pour télécharger une grille sans gouttières, et il sera réactif - vous n’avez besoin que du composant de grille et des composants réactifs concernant la largeur.

Demo (jsfiddle) custom grid

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

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

Sinon, vous devriez ajouter ce sélecteur devant chaque règle (pas tant que ça en tout cas).

Si vous connaissez MOINS et utilisez les scripts MOINS pour gérer vos styles, vous pouvez utiliser directement le Grid mixins v2 (github)

Grid mixins v3 (github)

5
Sherbrow

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.

2
Michael

Exemple 4 colonnes de span3. Pour les autres largeurs de portée, utilisez nouvelle largeur = ancienne largeur + taille de la 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 divisez une div span span12 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

1
Bass Jobsen

Le moyen le plus simple de supprimer le rembourrage et la marge est avec css simple.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
0
Gammer

Intéressant...

Suppression de la gouttière dans la grille par défaut de Twitter Bootstrap, soit 940 pixels de large. Et que la grille par défaut possède un conteneur de 940 pixels de large et que le fichier bootstrap-responsive.css figure dans sa feuille de style.

Si j'ai bien compris votre question, voici comment je l'ai fait ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stackoverflow Question</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->




    <style type="text/css">
        #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
            }
        }


        @media (max-width: 767px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        @media (max-width: 480px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        <!-- For Visual Aid Only -->
        .bg1 {
            background-color: #C2C2C2;
        }

        .bg2 {
            background-color: #D2D2D2;
        }
    </style>
  <body>
    <div id="wrap">
        <div class="container">
            <div class="row-fluid">
                <div class="span1 text-center bg1">01</div>
                <div class="span1 text-center bg2">02</div>
                <div class="span1 text-center bg1">03</div>
                <div class="span1 text-center bg2">04</div>
                <div class="span1 text-center bg1">05</div>
                <div class="span1 text-center bg2">06</div>
                <div class="span1 text-center bg1">07</div>
                <div class="span1 text-center bg2">08</div>
                <div class="span1 text-center bg1">09</div>
                <div class="span1 text-center bg2">10</div>
                <div class="span1 text-center bg1">11</div>
                <div class="span1 text-center bg2">12</div>
            </div>



            <div id="main_content">
                <div class="row-fluid">
                    <div class="span3 text-center bg1">1</div>
                    <div class="span3 text-center bg2">2</div>
                    <div class="span3 text-center bg1">3</div>
                    <div class="span3 text-center bg2">4</div>
                </div>
            </div>
        </div><!--/container-->
    </div>
  </body>
</html>

Et le résultat est ..

enter image description here

La plage de 4 div sans gouttière restera étendue pour le format paysage petite tablette (800x600). Toute taille inférieure à celle réduira les 4 div et sera empilée verticalement. Bien sûr, vous devrez le modifier pour répondre à vos besoins.

0
GaryP

OK, si vous souhaitez modifier la gouttière dans une rangée, mais souhaitez que ces div et divins intérieurs s'alignent sur la grille entourant le .no-Gutter rangée, vous pouvez copier-coller-fusionner la plupart des réponses dans l’extrait suivant:

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

Si vous préférez une gouttière plus petite au lieu de aucune, réglez simplement les 0 à votre guise ... (par exemple: 5px pour obtenir une gouttière de 10px).

0
Brainfeeder