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 ](
). ¿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
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
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;
}