0

estoy tratando de separar tal cual la imagen las filas y las columnas de esta estructura web. Solo he logrado separar las verdes con un margin-bottom: 5px; en la superior y un margin-top: 5px; en la inferior. Las demás me resultan imposibles. Por favor, ¿alguien podría ayudarme? Gracias de antemano.introducir la descripción de la imagen aquí

1
  • 1
    Hola user. Bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. Tu pregunta se considera muy amplia y es motivo de cierre. Si ves Cómo preguntar verás que tienes que proveer de un ejemplo de lo que has intentado y por que no resultó. Si no sabes por donde empezar has de buscar en internet por tu cuenta. Un saludo
    – lois6b
    Commented el 31 ago. 2017 a las 10:55

1 respuesta 1

2

Puedes ponerle un borde blanco a los divs para hacer la separación:

div[class^='col-']{
  border: 5px solid white;
}
.verde{
  background-color: green;
  height: 80px;
}
.rojo {
  background-color: red;
}
.rosa{
	background-color: violet;
	height: 80px;
}
.naranja{
	background-color: orange;
	height: 80px;
}
.azul{
	background-color: blue;
	height: 80px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-lg-12 verde"></div>
</div>
<div class="row rojo">
    <div class="col-md-2 col-sm-3 hidden-xs rojo"></div>
    <div class="col-md-10 col-sm-9 col-xs-12">
		<div class="row">
			<div class="col-md-12 rosa"></div>
			<div class="col-xs-12 col-md-6 naranja"></div>
			<div class="col-xs-12 col-md-6 naranja"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-4 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-4 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
			<div class="col-md-2 col-md-4 col-xs-6 azul"></div>
		</div>
    </div>
</div>
<div class="row">
  <div class="col-lg-12 verde"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.