Bootstrap 3 grille sans espace
J'essaie de créer une grille à 2 colonnes, avec littéralement 50%, sans marges ni remplissage.
Comment puis-je réaliser cela avec Bootstrap 3? J’ai essayé cela, mais je me suis retrouvé avec des marges négatives aux points de rupture de la tablette/du bureau:
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 offset-0">Col 1</div>
<div class="col-sm-6 offset-0">Col 2</div>
</div>
</diV>
CSS
.container {
background: green;
overflow: hidden;
}
.row > * {
background: blue;
color: #fff;
}
.row :first-child {
background: red;
}
.offset-0 {
padding-left: 0;
padding-right: 0;
}
DEMO - http://jsfiddle.net/pjBzY/
Le système de grille dans Bootstrap 3 nécessite un léger décalage latéral de votre pensée à partir de Bootstrap 2. Une colonne dans BS2 (col-*) n’EST PAS synonyme d’une colonne dans BS3 (col-sm-*, etc.), mais il existe un moyen de réaliser la même chose. résultat.
Découvrez cette mise à jour sur votre violon: http://jsfiddle.net/pjBzY/22/ (code copié ci-dessous).
Tout d'abord, vous n'avez pas besoin de spécifier une colonne pour chaque taille d'écran si vous voulez des colonnes 50/50 pour toutes les tailles. col-sm-6 s'applique non seulement aux petits écrans, mais également aux moyennes et grandes tailles, ce qui signifie que class="col-sm-6 col-md-6" est redondant (l'avantage réside dans le fait de modifier la largeur des colonnes sur des écrans de différentes tailles, tels que col-sm-6 col-md-8).
En ce qui concerne la question des marges, les marges négatives permettent d'aligner les blocs de texte de manière plus flexible que dans BS2. Vous remarquerez que dans jsfiddle, le texte de la première colonne est aligné visuellement sur le texte du paragraphe situé en dehors de la variable row - sauf pour les tailles de fenêtre "xs", où les colonnes ne sont pas appliquées.
Si vous avez besoin d'un comportement plus proche de ce que vous aviez dans BS2, où il y a des marges intérieures entre chaque colonne et il n'y a pas de marges négatives visuelles, vous devrez ajouter un interne-div à chaque colonne. Voir le inner-content dans mon jsfiddle. Mettez quelque chose comme ceci dans chaque colonne, et ils se comporteront comme les anciens éléments col-* dans BS2.
jsfiddle HTML
<div class="container">
<p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
<div class="row">
<div class="col-sm-6 my-column">
Col 1
<p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
</div>
<div class="col-sm-6 my-column">
Col 2
</div>
</div>
</div>
et le CSS
.row {
border: blue 1px solid;
}
.my-column {
background-color: green;
padding-top: 10px;
padding-bottom: 10px;
}
.my-column:first-child {
background-color: red;
}
.inner-content {
background: #eee;
border: #999;
border-radius: 5px;
padding: 15px;
}
Une autre option serait de créer votre propre classe CSS spéciale chaque fois que vous souhaitez appliquer les colonnes "sans gouttière".
HTML
<div class="container">
<div class="row no-Gutter">
<div class="col-6 col-sm-6 col-lg-6">Col 1</div>
<div class="col-6 col-sm-6 col-lg-6">Col 2</div>
</div>
</div>
CSS
.no-Gutter [class*="-6"] {
padding-left:0;
}
Démo: http://bootply.com/73960
J'ajoute toujours ce style à mon Bootstrap LESS/SASS:
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Ensuite, dans le HTML, vous pouvez écrire:
<div class="row row-no-padding">
Vous devez remplacer les marges négatives du .row dans les grands écrans, directement ou avec une classe personnalisée
@media (min-width: 768px){
.row {
margin-right: 0;
margin-left: 0;
}
}
Je suis sûr qu'il doit y avoir un moyen de le faire sans écrire mon propre CSS, c'est fou je dois écraser la marge et le remplissage, tout ce que je voulais, c'était une grille à 2 colonnes.
.row-offset-0 {
margin-left: 0;
margin-right: 0;
}
.row-offset-0 > * {
padding-left: 0;
padding-right: 0;
}
En généralisant les idées de Martinedwards et des autres, vous pouvez coller un tas de colonnes (pas seulement une paire) en ajustant le rembourrage des enfants de colonnes paires et impairs. Ajouter cette définition d'une classe, .no-Gutter, et la placer sur votre élément .row
.row.no-Gutter > [class*='col-']:nth-child(2n+1) {
padding-right: 0;
}
.row.no-Gutter > [class*='col-']:nth-child(2n) {
padding-left: 0;
}
Ou en SCSS:
.no-Gutter {
> [class*='col-'] {
&:nth-child(2n+1) {
padding-right: 0;
}
&:nth-child(2n) {
padding-left: 0;
}
}
}
Utilisez "clearfix" au lieu de "row". Il fait exactement la même chose sauf qu'il n'a pas de marge négative. Passez en revue l'utilisation de la "ligne" et vous verrez que c'est la seule différence.
Simple, vous pouvez utiliser la classe ci-dessous.
.nopadmar {
padding: 0 !important;
margin: 0 !important;
}<div class="container-fluid">
<div class="row">
<div class="col-md-6 nopadmar">Your Content<div>
<div class="col-md-6 nopadmar">Your Content<div>
</div>
</div>La grille Bootstrap 3 plus puissante (et 100% fluide) est désormais disponible en 3 tailles. Tiny (pour les smartphones .col -), petit (pour les tablettes .col-sm-) et grand (pour les ordinateurs portables/ordinateurs de bureau .col-lg- *). Les 3 tailles de grille vous permettent de contrôler le comportement de la grille sur différents appareils (ordinateurs de bureau, tablettes, smartphones, etc.).
Contrairement à 2.x, Bootstrap 3 ne fournit pas de grille fixe (basée sur les pixels). Même si une mise en page de largeur fixe peut toujours être obtenue à l'aide d'un simple wrapper personnalisé, il n'y a maintenant qu'un seul quadrillage (fluide) basé sur un pourcentage. Les classes .container et .row sont maintenant fluides par défaut. N'utilisez plus .row-fluid ou .container-fluid dans votre balisage 3.x.
.row.row-no-padding {
margin-left: 0 !important;
margin-right: 0 !important;
& > [class^="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}