Necesito obtener las imágenes en el segundo contenedor a la derecha para cambiar de vertical a la derecha a horizontal debajo del primer contenedor, y hacerlas más pequeñas a medida que la pantalla se hace más pequeña. Funcionó antes de agregar "<a href ..." El enlace funciona. ¿Qué estoy haciendo mal?
He probado algunas soluciones diferentes, incluido moverme col-md-10 col-sm-3desde el interior de la sección "<img class =" ... "" a la sección "<a href" y cambiar img-responsivea img-fluid, pero parece que no puedo cambiar el tamaño.
<body>
<div class="jumbotron text-center">
<h1>Lorem Ipsum</h1>
</div>
<div class="row">
<div class="container col-lg-7">
<div class="col-md-12 pull-right">
<h1>Summary: Lorem Ipsum<hr/></h1>
<img data-src="holder.js/200x200" class="img-responsive shadow float-left col-md-4" alt="200x200" src="Lorem Ipsum.png" data-holder-rendered="true">
<p class="text-left lead">Lorem Ipsum<br><br>
Lorem Ipsum</p>
</div>
</div>
<div class="container col-lg-3">
<div class="col-md-12">
<h1 class="text-center">Lorem Ipsum<hr/></h1>
<a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
<img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png" data-holder-rendered="true">
</a>
<a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
<img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png"data-holder-rendered="true">
</a>
<a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
<img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png"data-holder-rendered="true">
</a>
<a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
<img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png" data-holder-rendered="true">
</a>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
Me lo imaginé. La respuesta fue poner cada imagen y enlace en un contenedor separado y agregar col-3el tamaño de página extra pequeño.
<div class="row">
<div class="container col-md-10 col-sm-3 col-3">
<a href="Lorem.html">
<img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png" data-holder-rendered="true">
</a>
</div>
<div class="container col-md-10 col-sm-3 col-3">
<a href="Lorem.html">
<img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png"data-holder-rendered="true">
</a>
</div>
<div class="container col-md-10 col-sm-3 col-3">
<a href="Lorem.html">
<img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png"data-holder-rendered="true">
</a>
</div>
<div class="container col-md-10 col-sm-3 col-3">
<a href="Lorem.html">
<img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png" data-holder-rendered="true">
</a>
</div>
</div>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras