Dans bootstrap, comment ajouter des bordures à des lignes sans additionner?
j'utilise bootstrap version 3.0.1 pour faire une grille et quand j'ajoute une bordure aux lignes de la grille je peux voir que les lignes qui sont ensemble ajoutent là des bordures, j'obtiens une bordure plus épaisse.
voici mon code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container {
width: 420px;
}
div.row {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-md-12">Header</div>
</div>
<div class="row subheading">
<div class="col-md-12">Some text</div>
</div>
<div class="row footer">
<div class="col-md-12">Footer</div>
</div>
</div>
</body>
</html>
Et c'est ce que je . Comment puis-je utiliser la bordure sans les rangées adjacentes additionnant leurs bordures?, i.e.: je veux toutes les lignes avec une bordure de 1px.
Merci
4 réponses
Vous pouvez supprimer la bordure du haut si l'élément est le frère de la ligne . Ajoutez à cela le css :
.row + .row {
border-top:0;
}
Voici le lien pour le violon http://jsfiddle.net/7cb3Y/3/
Voici une solution:
div.row {
border: 1px solid;
border-bottom: 0px;
}
.container div.row:last-child {
border-bottom: 1px solid;
}
Je ne suis pas 100% son le plus efficace, mais il fonctionne: D
sur mes projets je donne à toutes les lignes la classe "borders" que je veux qu'elle affiche plus comme une table avec même borders. Donner à chaque élément enfant une bordure en bas et à droite et le premier élément de chaque rangée une bordure à gauche fera que toutes vos boîtes auront une bordure uniforme:
tout D'abord, donnez à tous les enfants des rangées une bordure à droite et en bas
.borders div{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
Suivant donne le premier enfant de chaque ou une bordure gauche
.borders div:first-child{
border-left:
1px solid #999;
}
dernier assurez-vous d'effacer le bordures pour leurs éléments enfants
.borders div > div{
border:0;
}
HTML:
<div class="row borders">
<div class="col-xs-5 col-md-2">Email</div>
<div class="col-xs-7 col-md-4">my@email.com</div>
<div class="col-xs-5 col-md-2">Phone</div>
<div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
Vous pouvez ajouter la bordure 1px aux côtés et en bas de chaque rangée. la première valeur est la limite supérieure, la deuxième est la limite droite, la troisième est la limite inférieure, et la quatrième est la limite gauche.
div.row {
border: 0px 1px 1px 1px solid;
}