web-dev-qa-db-fra.com

Dans bootstrap), comment ajouter des bordures aux lignes sans additionner?

J'utilise bootstrap version 3.0.1 pour créer une grille et lorsque j'ajoute une bordure aux lignes de la grille, je peux voir que les lignes qui sont ensemble s'additionnent, j'obtiens une bordure plus épaisse.

Ceci 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 comprends . Comment utiliser la bordure sans ajouter les bordures aux lignes adjacentes? C'est-à-dire: je veux toutes les lignes avec une bordure de 1 px.

Merci

csstwitter-bootstrapborder
26
PerseP

Vous pouvez supprimer la bordure du haut si l'élément est frère de la ligne. Ajoutez ceci au css:

.row + .row {
   border-top:0;
}

Voici le lien vers le violon (http://jsfiddle.net/7/7cb3Y/3/

40
Siddharth Sharma

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% le plus efficace, mais ça marche: D

http://jsfiddle.net/aaronmallen/7cb3Y/2/

17
aaronmallen

Sur mes projets, je donne à toutes les lignes la classe "bordures" que je veux voir apparaître plus comme un tableau avec des bordures égales. Donner à chaque élément enfant une bordure en bas et à droite et le premier élément de chaque ligne, une bordure gauche, donnera à toutes vos cases une bordure paire:

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;
}

Ensuite, donnez le premier enfant de chacun ou une bordure gauche

.borders div:first-child{
    border-left:
    1px solid #999;
}

Enfin, assurez-vous de bien effacer les frontières 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">[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>
2
Steffan Perry

vous pouvez ajouter la bordure 1px aux côtés et au bas de chaque ligne. la première valeur correspond à la bordure supérieure, la seconde à la bordure droite, la troisième à la bordure inférieure et la quatrième à la bordure gauche.

div.row {
  border: 0px 1px 1px 1px solid;
}
1
abigezunt