Bootstrap navbar: распределение всех кнопок, чтобы между ними было одинаковое пространство - PullRequest
Новая
       19

Bootstrap navbar: распределение всех кнопок, чтобы между ними было одинаковое пространство

0 голосов
/ 13 мая 2019

Я хочу сделать навигационную панель с помощью Bootstrap.Он включает в себя логотип слева и группу из 4 связанных значков справа.Есть 4 ссылки между ними.Я хочу, чтобы между всеми этими шестью полями было одинаковое Адаптивное пространство.Для небольших устройств я хочу, чтобы переключатель сбора данных начальной загрузки справа их собирал.

Пробовал разные вещи, но он никогда не работал или не работал с переключателем.Переносить их налево, направо или просто по центру не было проблемой, но между ними никогда не было одинакового пространства.Я прочитал всю инструкцию на начальной стадии загрузки, но я так и не нашел решения. 

<div class="container">
        <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
            <a href="#" class="navbar-brand"><img src="./images/logo></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>  
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav">
                    <li class="flex-fill nav-item"><a href="" class="nav-link">topic one</a></li>
                    <li class="nav-item"><a href="" class="nav-link">topic two</a></li>
                    <li class="nav-item"><a href="" class="nav-link">topic two</a></li>
                    <li class="nav-item"><a href="" class="nav-link">topic three</a></li>
                        <li class="nav-item"><a href="" class="nav-link">
                <div class="navbar-nav collapse navbar-collapse" id="navbarNavAltMarkup">
                                    <a href=""><img src="./images/icon1“></a>
                                    <a href=""><img src="./images/icon2“></a>
                                    <a href=""><img src="./images/icon3“></a>
                                    <a href=""><img src="./images/icon4“></a>
                            </div>
            </li>
               </ul>
            </div>
        </nav>
    </div>
...