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.
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 div
s qui sont dans le main_content
div
.
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?
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)
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).
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.
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)
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.
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
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>
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 ..
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.
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).