En bootstrap ¿cómo añadir bordes a las filas sin sumar?

Estoy usando bootstrap versión 3.0.1 para hacer una rejilla y cuando añado un borde a las filas de la rejilla veo que las filas que están juntas suman sus bordes, me sale un borde más grueso.

Este es mi código:

<!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>

Y esto es lo que [obtengo ](http://jsfiddle.net/7cb3Y/). ¿Cómo puedo usar el borde sin que las filas contiguas sumen sus bordes?, es decir: quiero todas las filas con un borde de 1px.

Gracias

Programación
css twitter-bootstrap border
3º noviembre 2013 в 8:40
4 vistas
Solución

Puede eliminar el borde de la parte superior si el elemento es hermano de la fila . Añade esto a css:

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

Aquí está el enlace a la fiddle http://jsfiddle.net/7cb3Y/3/

Hakan Fıstık
Respuesta editada 23º marzo 2017 в 9:30
Comentarios (1)

He aquí una solución:

div.row { 
  border: 1px solid;
  border-bottom: 0px;
}
.container div.row:last-child {
  border-bottom: 1px solid;
}

No estoy 100% es el más effiecent, pero funciona :D

[http://jsfiddle.net/aaronmallen/7cb3Y/2/][1]

Comentarios (1)

puedes añadir el borde de 1px sólo a los lados y a la parte inferior de cada fila. el primer valor es el borde superior, el segundo es el borde derecho, el tercero es el borde inferior y el cuarto es el borde izquierdo.

div.row {
  border: 0px 1px 1px 1px solid;
}
Comentarios (1)