No sé por qué mi pie de página no ocupa el ancho completo con bootstrap 4.0.
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?
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:
También agregué un poco de relleno al elemento del pie de página utilizando la clase “p-3” para mejorar el espaciado.