1

No puedo utilizar bien row y col, me termina provocando scroll de forma horizontal. Busco la forma pero no la encuentro y al final uso display: flex. Saco todo, pongo solo un h1 y sigue teniendo el scroll horizontal, comienza la falla únicamente al poner row y col. Estoy usando Bootstrap y solamente hice un footer con los derechos reservados, con 2 listas desordenadas

<footer class="bg-warning py-3">
      <section class="row">
        <article class="col-12">
          <h2 class="lead text-white p-4 text-center">
            <b>&copy Todos los derechos reservados</b>
          </h2>
        </article>
        <article class="col-6">
          <ul>
            <li class="mt-2 list-unstyled">
              <a class="text-white link-footer" href="">Contacto</a>
            </li>
            <li class="mt-2 list-unstyled">
              <a class="text-white link-footer" href="">¿Quienes somos?</a>
            </li>
            <li class="mt-2 list-unstyled">
              <a class="text-white link-footer" href="">Biblioteca de juegos</a>
            </li>
          </ul>
        </article>
        <article class="col-6">
          <ul>
            <li class="list-unstyled">
              <a class="link-footer text-white" href="">
                <i class="mt-1 me-3 text-white fa-2x fa-brands fa-facebook"></i>
                Facebook</a
              >
            </li>
            <li class="list-unstyled">
              <a class="link-footer text-white" href=""
                ><i
                  class="mt-1 me-3 text-white fa-2x fa-brands fa-instagram"
                ></i>
                Instagram</a
              >
            </li>
            <li class="list-unstyled">
              <a class="link-footer text-white" href=""
                ><i class="mt-1 me-3 text-white fa-2x fa-brands fa-twitter"></i
                >Twitter</a
              >
            </li>
          </ul>
        </article>
      </section>
    </footer>

1 respuesta 1

0

Te está ocurriendo porque las clases de Bootstrap row, col y container/container-fluid están preparadas para ir de la mano. Un .row debe ser siempre hijo directo de un .container/.container-fluid, al igual que un .col siempre debe serlo de un .row.

Las clase .row tienen márgenes negativos que son compensados por las clases container o container-fluid. Si no son compensados se produce el desbordamiento que estás experimentando.

Ejemplo sin contenedor:

.sin-contenedor {
  width: 100%;
  height: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<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>

<div class="row">
  <div class="col-12">
    <div class="sin-contenedor">
      <p>Sin contenedor</p>
    </div>
  </div>
</div>

Ejemplo con contenedor:

.con-contenedor {
  width: 100%;
  height: 200px;
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<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>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="con-contenedor">
        <p>Con contenedor</p>
      </div>
    </div>
  </div>
</div>

En el primer ejemplo no estoy usando un contenedor, por lo que se produce el desbordamiento, en el segundo ejemplo si lo estoy usando, no produciéndose.

Si analizas a través del inspector de código de tu navegador las reglas CSS que aportan dichas clases de Bootstrap, verás rápidamente a lo que me estoy refiriendo.

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.