Question

我无法正确对齐它们。你能帮我吗？

如果可以的话，我想我会更喜欢按钮...如果您有样式方面的建议使它看起来更优雅，将不胜感激。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation">
    <a class="navbar-brand mb-0" href="http://cfswarm-main.localtest.me/secure"><strong>Home</strong></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-user-cog"></i> Settings <b class="caret"></b>
                </a>
                <div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="navbarDropdown">
                    <a href="http://cfswarm-main.localtest.me/settings/account" class="dropdown-item text-light bg-dark"><i class="fas fa-cog"></i>&nbsp; Account Settings</a>
                    <a href="http://cfswarm-main.localtest.me/settings/user" class="dropdown-item text-light bg-dark"><i class="fas fa-user"></i>&nbsp; User Settings</a>
                    <div class="dropdown-divider"></div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                    <i class="fab fa-dev"></i> DevTools <b class="caret"></b>
                </a>
                <div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="navbarDropdown">
                    <a href="" class="dropdown-item text-light bg-dark"><strong>ColdBox Perseverance (Joshua 1:9)</strong></a>
                    <a href="http://coldbox.ortusbooks.com" class="dropdown-item text-light bg-dark" target="_blank"><i class="fas fa-book"></i>&nbsp; Help Manual</a>
                    <a href="https://apidocs.coldbox.org/" class="dropdown-item text-light bg-dark" target="_blank"><i class="fas fa-book"></i>&nbsp; CB API docs</a>
                    <a href="https://www.forgebox.io/" class="dropdown-item text-light bg-dark" target="_blank"><i class="fas fa-cloud"></i>&nbsp; ForgeBox</a>
                    <a href="https://boxteam.slack.com/messages" class="dropdown-item text-light bg-dark" target="_blank"><i class="fas fa-slack"></i>&nbsp; Boxteam Slack</a>
                </div>
            </li>
            <li class="nav-item">
                <a href="http://cfswarm-main.localtest.me/main/logout" class="dropdown-item text-light bg-dark"><i class="fas fa-sign-out-alt"></i>&nbsp; Logout</a>
            </li>
        </ul>
    </div>
</nav>

Fiddle demo

Answer 1

“注销”按钮未对齐的原因是，您使用的是dropdown-item，即使它不是dropdown组件的一部分。如果您将该类别换成适当的类别：nav-link，它将按预期对齐。

所以改变：

<a href="http://cfswarm-main.localtest.me/main/logout" class="dropdown-item text-light bg-dark"><i class="fas fa-sign-out-alt"></i>  Logout</a>

收件人：

<a href="http://cfswarm-main.localtest.me/main/logout" class="nav-link text-light bg-dark"><i class="fas fa-sign-out-alt"></i>  Logout</a>

顺便说一句，您可以用 的margin工具类（作为字体超赞类声明的一部分）替换所有mr-1，以提高一致性。

如何使下拉菜单与非下拉菜单文本垂直对齐？

1 个答案: