Question

我无法对齐此页脚，我需要将6个项目保留在页脚中，并且不能从屏幕上“剪切”。

            <ul class="navbar-nav justify-content-between justify-content-sm-around align-items-center w-100 mt-1">
                    <li class="nav-item text-center             "><a href="#" class="nav-link text-white"><img src="images/logotypes/aliansce-logo-icon.svg" class="mr-sm-2" alt="Aliansce Logo" width="25" height="25">SOBRE</a></li>
                    <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-chart-line     fa-lg mr-sm-2 al-text-green"></i>NÚMEROS</a></li>
                    <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-shopping-bag   fa-lg mr-sm-2 al-text-green"></i>MARCAS</a></li>
                    <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-camera         fa-lg mr-sm-2 al-text-green"></i>GALERIA</a></li>
                    <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fab fa-accusoft       fa-lg mr-sm-2 al-text-green"></i>PLANTA</a></li>
                    <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-map-marker-alt fa-lg mr-sm-2 al-text-green"></i>LOCAL</a></li>
                </ul>


<!-- INSERIR O CÓDIGO AQUI -->

Answer 1

解决了以下问题：

@media only screen and (max-width: 576px) {
    .footer-nav-title { font-size: 0.72rem; }
}


 <!-- FOOTER DE NAVEGAÇÃO -->
    <footer role="footer" class="navbar navbar-expand invisible-scrollbar fixed-bottom al-bg-dark-grey">
        <div class="container-fluid">
            <ul class="navbar-nav flex-row justify-content-start justify-content-sm-around align-items-center w-100">
                <li class="nav-item text-center             "><a href="#" class="nav-link text-white"><img src="images/logotypes/aliansce-logo-icon.svg" class="mr-sm-2" alt="Aliansce Logo" width="25" height="25"><span class="footer-nav-title">SOBRE</span></a></li>
                <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-chart-line     fa-lg mr-sm-2 al-text-green"></i><span class="footer-nav-title">NÚMEROS</span></a></li>
                <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-shopping-bag   fa-lg mr-sm-2 al-text-green"></i><span class="footer-nav-title">MARCAS</span></a></li>
                <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-camera         fa-lg mr-sm-2 al-text-green"></i><span class="footer-nav-title">GALERIA</span></a></li>
                <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fab fa-accusoft       fa-lg mr-sm-2 al-text-green"></i><span class="footer-nav-title">PLANTA</span></a></li>
                <li class="nav-item text-center mt-1 mt-sm-0"><a href="#" class="nav-link text-white"><i class="fas fa-map-marker-alt fa-lg mr-sm-2 al-text-green"></i><span class="footer-nav-title">LOCAL</span></a></li>
            </ul>
        </div>
    </footer>

如何使用Bootstrap 4.1.1创建6个项目的响应式页脚？

1 个答案: