2

Muy buenas, He empezado a aprender bootstrap pero hay algunas cosas con las que no me aclaro. Sobre todo los espaciados. Por ejemplo, estoy intentando hacer el ejercicio típico para novatos y no doy con la clave para el sm. Este es mi código:

<style>
    body > *{
        min-height: 100px;
        margin-bottom: 1%;
    }

    #bloque{
        margin-left: 1%;
    }

    #bloque > div{
        margin-bottom: 1%;
    }

    #bloque > div > div{
        margin-bottom: 1%;
    }
</style>
<title>Document</title>
</head>
<body>
<header class="container-fluid" style="background-color:green;"></header>
<div class="row">

    <div class="col-md-2" style="background-color:red;"></div>

    <div id="bloque" class="row col-md-10">
        <div class="container-fluid" style="background-color:purple;min-height: 100px;"></div>
        <div class="row col-12">
            <div class="col-md-6" style="background-color:burlywood; min-height: 300px;"></div>
            <div class="col-md-6" style="background-color:burlywood; min-height: 300px;"></div>
        </div>
        <div class="row d-flex justify-content-between col-md-12">
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-3" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-3" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
            <div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
        </div>
    </div>
</div>

<div class="container-fluid"  style="background-color:green;"></div>

Y el ejercicio que estoy haciendo: introducir la descripción de la imagen aquí

Gracias

6
  • 1
    El problema solo lo tienes en el sm? Si pudieras subir una foto o un dibujo de lo que te ha salido, mejor. Como usas HTML5, te recomiendo usar las etiquetas Nav, Article, Section etc, (son varias) que te coloca los bloques ordenados y luego vas probando con las 12 columnas lo que quieras.
    – cupax64
    Commented el 29 nov. 2019 a las 8:18
  • Gracias @cupax64, la verdad es que después de muchas vueltas creo que he conseguido algo parecido. Una pregunta, con respecto a lo que comentas, dices que bootstrap trata de forma diferente las etiquetas nav, article, section, etc? Commented el 29 nov. 2019 a las 8:21
  • No, bootstrap tiene sus reglas de clases, que es lo que lo hace tan comodo, poniendo 3 clases, haces maravillas. HTML5, es el que tiene las etiquetas de nav, article, que sin css, (ya soy algo mayor y yo usaba html4, que tenias que poner div´s a mansalva) te coloca las cosas como en el dibujo. Para aprender bootstrap, lo mejor, www.3schools, tiene muchos ejemplos y esta bien para empezar.
    – cupax64
    Commented el 29 nov. 2019 a las 8:26
  • Gracias cupax64, hace algún tiempo que uso HTML5 pero, eso que me comentas no tenía ni idea. Me estas diciendo que, sin css ¿se pueden colocar los contenedores del mismo modo que en la imagen que he subido? ¿Podrías facilitarme algún sitio en el que pueda ver algún ejemplo? Perdona la insistencia pero, llevo un tiempo un tiempo estudiando y, lo que me acabas de decir es como lluvia en el desierto :D Commented el 29 nov. 2019 a las 9:07
  • Las etiquetas aside y nav, te crean una columna a los lados. Lo que seria la franja roja que hay en la primera foto(el nav) y el aside, te crearia otra igual, en la derecha. (Creo recordar que no habia problema en poner las clases bootstrap con etiquetas html5, te hablo de memoria, hace mucho que no hago web). Para seguir un buen tutorial con ejemplos de html5 www.w3schools.com y es.stackoverflow.com hay muchas cosas resueltas sobre html5. Suerte compañero.
    – cupax64
    Commented el 29 nov. 2019 a las 9:35

1 respuesta 1

1

El problema es que no estás aplicando la distribución por columnas de la manera en que requiere el ejercicio. Contempla escenarios diferentes para tres tamaños de pantalla distintos del siguiente modo:

.marginTop15px{margin-top: 15px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<body class="container-fluid">
    <header> 
    <div class="row" style="background-color:green;height:150px"><div clases="col-12">verde</div> 
   </div>
    </header>
<div class="row marginTop15px">
     <div class="d-none d-sm-inline col-sm-2" style="background-color:red; ">rojo</div>
    <div class="col-12 col-sm-10">
        <div class="row">
        <div class="col-12 col-md-6" style="background-color:burlywood; min-height: 300px;">naranja</div>
        <div class="col-12 col-md-6" style="background-color:burlywood; min-height: 300px;">naranja</div>
    </div>
    <div class="row d-flex">
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-3" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-3" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
        <div class="col-6 col-sm-4 col-md-2" style="background-color:blue;min-height: 100px;">azul</div>
    </div>
    </div>
</div>
  <footer class="row marginTop15px">
    <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.