Comment utiliser la bordure avec Bootstrap
Comment puis-je résoudre ce problème? Lorsque vous ajoutez des bordures à un div, le div n'est pas centré et la classe span12 n'est pas centrée.
Je voudrais centrer le div avec les frontières
<div class="row" >
<div class="span12" style="border: 2px solid black">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
Malheureusement, c'est ce que font les frontières, elles font partie de l'espace qu'un élément occupe. Permettez-moi de vous présenter le cousin moins connu de Border: outline. C'est pratiquement identique à la frontière. La seule différence est qu'il se comporte plutôt comme une zone d'ombre, en ce sens qu'il ne prend pas d'espace dans votre mise en page et qu'il doit figurer sur les 4 côtés de l'élément.
http://codepen.io/cimmanon/pen/wyktr
.foo {
outline: 1px solid orange;
}
À partir de Bootstrap 3, vous pouvez utiliser les classes du Panel:
<div class="panel panel-default">Surrounded by border</div>
Il existe une propriété CSS appelée box-sizing. Elle détermine la largeur totale d'un élément de votre page. La valeur par défaut est content-box, qui n'inclut pas le remplissage, la marge ou la bordure de l'élément.
Par conséquent, si vous définissez une div pour que width: 500px et 20px complètent tout autour, il prendra 540px sur votre site Web (500 + 20 + 20).
C'est ce qui cause votre problème. Bootstrap calcule les largeurs définies pour des éléments similaires à l'exemple ci-dessus, et ces éléments n'ont pas de bordures. Puisque Bootstrap s'emboîte comme un puzzle, ajouter une bordure à l'un des côtés donnerait une largeur totale de 501 pixels (en reprenant l'exemple ci-dessus) et romprait votre mise en page.
Le moyen le plus simple de résoudre ce problème consiste à ajuster votre box-sizing. La valeur que vous utiliseriez est box-sizing: border-box. Cela inclut le remplissage et la bordure dans les éléments de votre boîte. Vous pouvez en savoir plus sur la taille de la boîte ici.
Un problème avec cette solution est qu'il ne fonctionne que sur IE8 +. Par conséquent, si vous avez besoin d'une assistance IE plus profonde, vous devrez remplacer les largeurs Bootstrap pour prendre en compte votre bordure.
Pour donner un exemple de calcul d'une nouvelle largeur, commencez par vérifier la largeur définie par Bootstrap sur votre élément. Supposons qu'il s'agit d'un span6 et que sa largeur est de 320px (ceci est purement hypothétique, la largeur réelle de votre span6 dépendra de votre configuration spécifique de Bootstrap). Si vous vouliez ajouter une seule bordure à droite avec un rembourrage de 20 pixels, vous écrivez ce code CSS dans votre feuille de style.
.span6 {
padding-right: 20px;
border-right: 1px solid #ddd;
width: 299px;
}
où la nouvelle largeur est calculée par:
old width - padding - border
En fonction de la taille souhaitée de votre div, vous pouvez utiliser la classe thumbnail du composant intégré de Bootstrap, avec (ou sans) le système de grille pour créer des bordures autour de chacun de vos div articles.
Ces exemples sur le site Web de Bootstrap démontre la facilité d'utilisation et l'absence de besoin de tout ajout supplémentaire spécial CSS:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
qui produit les éléments de grille div suivants:
ou ajouter du contenu supplémentaire:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
<a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
qui produit les éléments de grille div suivants:
Ce que d’autres ont mentionné à propos de border vs border box est tout à fait correct. Vous pouvez toujours obtenir que cela fonctionne sans avoir à créer de classes personnalisées cependant: http://jsfiddle.net/panchroma/yfzdD/
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4"> 1 </div>
<div class="span4"> 2 </div>
<div class="span4"> 3 </div>
</div><!-- end nested row -->
</div><!-- end span 12 -->
</div> <!-- end row -->
</div><!-- end container -->
CSS
.span12{
border:solid 2px black;
background-color:grey;
}
Bonne chance!
Bien que ce ne soit probablement pas la bonne façon de le faire, quelque chose que j'ai trouvé être une solution de contournement simple consiste simplement à utiliser une zone d'ombre plutôt qu'une bordure ... Ceci ne casse pas le système de grille. Par exemple, dans votre cas:
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
</div>
CSS
.span12{
-moz-box-shadow: 0 0 2px black;
-webkit-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
}
Vous ne pouvez pas simplement ajouter une bordure à l'étendue car elle cassera la mise en page à cause de la façon dont la largeur est calculée: width = border + padding + width. Étant donné que le conteneur a une résolution de 940 pixels et une étendue de 940 pixels, l’ajout d’une bordure de 2 pixels (donc de 4 pixels au total) le fera paraître décentré. La solution consiste à modifier la largeur pour inclure la bordure de 4px (original - 4px) ou d’avoir une autre div à l’intérieur qui crée la bordure de 2px.
Si vous avez besoin d’une bordure de base, il vous suffit d’utiliser bootstrap wells.
Par exemple le code ci-dessous:
<div class="well">Basic Well</div>