Question

我想使用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>

Bootstrap导航栏：分配所有按钮，使它们之间具有相同的空间

0 个答案: