es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No sé por qué mi pie de página no ocupa el ancho completo con bootstrap 4.0.

31 Jul, 2023 Programación

Mi pie de página no ocupa el 100% de ancho y realmente no sé qué está mal. Tal vez hay un problema con la anidación de los contenedores, pero no sé cómo arreglarlo correctamente. Acabo de empezar a aprender Bootstrap, así que este es mi primer código con él.

<div class="container-fluid d-flex align-items-center justify-content-around">
    <footer class="container-fluid align-items-center text-center">
      <div class="row">
        <div class="col-4">
          <ul class="list-unstyled">
            <li class="mb-2 font-weight-bolder">Links</li>
            <li class="mb-2"><a class="text-reset" href="#">Home</a></li>
            <li class="mb-2"><a class="text-reset" href="#">Cardápio</a></li>
            <li class="mb-2"><a class="text-reset" href="#">Contato</a></li>
          </ul>
        </div>
        <div class="col-8">
          <ul class="list-unstyled">
            <li class="mb-2 font-weight-bolder">Pizzas</li>
            <li class="mb-2"><a class="text-reset" href="#">Tradicionais</a></li>
            <li class="mb-2"><a class="text-reset" href="#">Nobres</a></li>
            <li class="mb-2"><a class="text-reset" href="#">Doces</a></li>
          </ul>
        </div>
      </div>
      <p class="align-items-center">Pizzaria.com.br</p>
    </footer>
</div>

Aquí está la captura de pantalla del sitio web: Enlace a la captura de pantalla

¿Alguna sugerencia?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el pie de página no ocupando el 100% de ancho puede deberse a que se está utilizando la clase “container” en el elemento del pie de página. En lugar de utilizar la clase “container”, intenta utilizar la clase “container-fluid” en el elemento del pie de página para que ocupe el 100% de ancho.

    Además, la anidación de “container” podría estar causando el problema. Como ya tienes un elemento “container-fluid” que envuelve al elemento del pie de página, puedes eliminar la clase “container” del elemento del pie de página para evitar anidaciones innecesarias.

    Aquí está el código actualizado:

    <div class="container-fluid d-flex align-items-center justify-content-around">
  <footer class="container-fluid align-items-center text-center p-3">
    <div class="row">
      <div class="col-4">
        <ul class="list-unstyled">
          <li class="mb-2 font-weight-bolder">Enlaces</li>
          <li class="mb-2"><a class="text-reset" href="#">Inicio</a></li>
          <li class="mb-2"><a class="text-reset" href="#">Menú</a></li>
          <li class="mb-2"><a class="text-reset" href="#">Contacto</a></li>
        </ul>
      </div>
      <div class="col-8">
        <ul class="list-unstyled">
          <li class="mb-2 font-weight-bolder">Pizzas</li>
          <li class="mb-2"><a class="text-reset" href="#">Tradicionales</a></li>
          <li class="mb-2"><a class="text-reset" href="#">Gourmet</a></li>
          <li class="mb-2"><a class="text-reset" href="#">Postres</a></li>
        </ul>
      </div>
    </div>
    Pizzaria.com.br
  </footer>
</div>

    También agregué un poco de relleno al elemento del pie de página utilizando la clase “p-3” para mejorar el espaciado.

Comments are closed.