Dans le bootstrap comment ajouter des bordures de lignes sans ajouter jusqu'à?

Je suis en utilisant le démarrage de la version 3.0.1 de faire une grille et quand j'ai ajouter une bordure aux lignes de la grille, je peux voir que les lignes qui sont ensemble à ajouter là-haut frontières, je obtenir une bordure plus épaisse.

C'est 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 reçois .
Comment puis-je utiliser de la frontière, sans les rangées contiguës additionnant leurs frontières?, c'est à dire: je veux toutes les lignes avec une bordure de 1px.

Merci

InformationsquelleAutor PerseP | 2013-11-03

40

Vous pouvez supprimer la bordure du haut si l'élément est le frère de la ligne .
Ajouter cette css :
```
.row + .row {
   border-top:0;
}
```
Voici le lien pour le violon http://jsfiddle.net/7cb3Y/3/
- Cela devrait être accepté réponse n'est pas la mienne.
InformationsquelleAutor Siddharth Sharma
17

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 plus effiecent, mais ça fonctionne 😀

http://jsfiddle.net/aaronmallen/7cb3Y/2/
- Même si j'apprécie de recevoir un crédit pour cette réponse, je ne crois Siddharth Sharma réponse est plus efficace.
InformationsquelleAutor aaronmallen
2

Sur mes projets je donne toutes les lignes à la classe des "frontières" qui je veux ce qu'il affiche plus comme une table avec même des frontières. Donner à chaque enfant un élément de la frontière sur le fond et à droite, et le premier élément de chaque ligne de gauche de la frontière, de faire toutes vos boîtes ont une même frontière:

D'abord donner toutes les lignes enfants d'une frontière sur la 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 les frontières pour leur enfant, les éléments
```
.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">[email protected]</div>
    <div class="col-xs-5 col-md-2">Phone</div>
    <div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
```
InformationsquelleAutor Steffan Perry
1

vous pouvez ajouter la 1px frontière seulement les côtés et en bas de chaque ligne. la première valeur est la bordure du haut, la seconde est la partie droite de la bordure, la troisième est la bordure du bas, et la quatrième est la bordure gauche.
```
div.row {
  border: 0px 1px 1px 1px solid;
}
```
- Qui laisserait le haut div w/o une bordure supérieure.
InformationsquelleAutor abigezunt

Vous devez vous connecter pour publier un commentaire.