0

disculpen es que tengo varias imagenes que estoy intentando centrar y poner una al lado de la otra, pero llevo como 3-4 horas viendo tutoriales videos, de flex, grids, con bootstrap los col, y siempre me queda uno debajo de otro. no se si tengo un error o algo mal...pondre todo el style en un solo archivo para que vean todo el codigo. en donde quedo vacio el class="" alli ponia los col- y las cosas q iban pasando en los tutoriales, pero ninguno me funcionaba.

Lo que quiero hacer, es que en pantallas pequeñas como celulares, se vean 2 imagenes(una al lado de la otra) y ya si la pantalla es grande, que se vean de 3 en 3.

CELL:

2-2

2-2

COMPU:

3-3-3

3-3-3

DE ANTE MANO MUCHAS GRACIAS

2 respuestas 2

0

tenias el problema en tu codigo que en la etiqueta <div> correspondiente a la clase class="row" te faltaba el igual, por eso no se te aplicaban los estilos.

Para lo que quieres hacer, debes usar en cada etiqueta correspondiente al hijo directo del row la clase class="col-md-4" para las pantallas grandes y class="col-sm-6" para pantallas pequeñas. Esos numeros se deben a que el grid de bootstrap tiene 12 numeros, si coges el 4 significa que estas repartiendo el contenido en un espacio de 4 para el primero, 4 para el segundo y 4 para el tercero, sumando doce. Por otra parte, si coges 6 estarias cogiendo 6 para el primero y 6 para el segundo, sumando igualmente 12.

El codigo que te propongo es el siguiente:

<div class="row">
    <div class="col-sm-6 col-md-4">
        <a href="https://WEB//.html"> TITULO<br><img src="./inicioG_files/f1.png" class="img-responsive"> 
       </a>
    </div>
</div>

Deberas de ponerle ese nombre de clase a todos los divs que tenias con la etiqueta class="" vacios.

PD: He visto tu css y no estas teniendo en cuenta una cosa muy importante al usar bootstrap. Siempre que quieras aplicar un estilo css a una atributo en el cual tambien estes usando bootstrap deberas añadirle el parametro !important, imaginate un width deberia de quedar asi: width: 200px !important ya que el bootstrap se superpone a lo que hagas con css.

Espero que te sirva de ayuda. Un saludo

1
  • muchas gracias, en un par de horas verificare y hare como me dices
    – David V
    Commented el 24 dic. 2022 a las 16:14
0

Con Boostrap es fácil, he hecho lo que pide poniendo las siguientes clases. Igual te recomiendo que leas o tomes algunos cursos de BS en YouTube :-)

<div class="float-left mr-1 col-sm-12 col-md-3">
    <a href="#.html"> TITULO 1<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
    </a>
</div>

<!DOCTYPE html>
<html lang="es" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <style>
      /*Para el footer*/
      .wgfooter{
      width: 100% !important;
      height: 200px;
      }
      /*Fuentes*/
      @font-face {
      font-family: burbank1;
      src: url("./inicioG_files/Burbank1.woff") format('woff');
      font-weight: 700;
      font-style: normal;
      }
      @font-face {
      font-family: burbank2;
      src: url("./inicioG_files/Burbank2.woff") format('woff');
      font-weight: 700;
      font-style: normal;
      }
      @font-face {
      font-family: burbank3;
      src: url("./inicioG_files/Burbank3.woff") format('woff');
      font-weight: 700;
      font-style: normal;
      }
      body,html {
      font-family: burbank2;
      text-align: center;
      }
      a,p{
          text-align: center;
      }
      .titulo {
      font-family: burbank1;
      }
      /*CCS BODY*/
      article{
      text-align: center;
      }
      img{
      text-align: center;
      width: 200px;
      height: 280px;
      }

   </style>
   <body>
      <header class="titulo">
         <a href="#">WEB/</a>
      </header>
      <!--script para anuncio1-->
      <div id="divPadre">
         <!--script-body-->
      </div>
      <br>
      <div>
         <p>
            <a href="#">FREE FIRE</a>
         </p>
      </div>
      <br>
      <div class="container">
         <div class="row">
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#.html"> TITULO 1<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 2<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 3<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 4<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 5<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 6<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 7<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 8<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 9<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 10<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 11<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
            <div class="float-left mr-1 col-sm-12 col-md-3">
               <a href="#"> TITULO 12<br><img src="https://thedesignangel.co.uk/wp-content/uploads/2012/12/300-90x90-copy.jpg" class="img-responsive">
               </a>
            </div>
         </div>
      </div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
</html>

1
  • muchas gracias, en un par de horas verificare y hare como me dices
    – David V
    Commented el 24 dic. 2022 a las 16:14

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.