Как создать отзывчивый нижний колонтитул из 6 предметов с помощью начальной загрузки 4.1.1? - PullRequest
Новая
       6

Как создать отзывчивый нижний колонтитул из 6 предметов с помощью начальной загрузки 4.1.1?

0 голосов
/ 28 июня 2018

Я не могу выровнять этот нижний колонтитул, мне нужно, чтобы 6 элементов оставались в нижнем колонтитуле и не были "вырезаны" с экрана.

enter image description here

            <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 -->

1 Ответ

0 голосов
/ 28 июня 2018

РЕШЕНА ПРОБЛЕМА СЛЕДУЮЩЕГО: 

@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>
...