导航栏项目之间的引导响应空间答案

【问题标题】：Bootstrap responsive space between navbar items导航栏项目之间的引导响应空间
【发布时间】：2021-04-20 20:48:55
【问题描述】：

我正在使用 Bootstrap 开发一个简单的 web 应用程序，我需要使导航栏项目之间的空间具有响应性，以便在较小的屏幕中导航栏项目彼此靠近，但在较大的屏幕中它们彼此相距较远。

这是我目前所做的：

.title {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-size: 26px;
    line-height: 1.25;
}

.btn-bd-sign-in {
    font-weight: 600;
    color: white;
}

.btn-bd-sign-up {
    font-weight: 600;
    color: white;
    border-color: white;
}

.btn-bd-sign-up:hover {
    font-weight: 600;
    color: black;
    border-color: white;
    background-color: white;
}

.home-btn {
    font-weight: 600;
    color: white!important;
}

.home-btn:hover {
    font-weight: 600;
    color: #212529!important;
}

body {
    height: 100vh;
    background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}

button, button:active, button:focus {
    background: none!important;
    border: none;
}

button:hover {
    border-bottom: 3px solid #0275d8;
}

<body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <div class="container-fluid padding-left">
        <div class="row flex-xl-nowrap">
            <div class="col-4">
            </div>
            <div class="col-8-auto">
                <nav class="navbar navbar-expand navbar-light">
                    <div>
                        <ul class="navbar-nav mr-md-5 mr-lg-5 mr-xl-5">
                            <li class="nav-item">
                                <button class="nav-link" href="#">Profile</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" href="#">Statistics</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" href="#">Polls</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" href="#">Settings</button>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</body>

我怎样才能实现这个功能？

现在是这样的：

在移动设备上它看起来与预期一样，但我希望在较大的设备上比图像中显示的间距大一点。

【问题讨论】：

你有输出的线框
是的，我要添加图片

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

正如see in the Bootstrap docs 所说，间距实用程序类（填充和边距）是响应式的。比如……

px-lg-5 px-sm-3 px-1

根据屏幕宽度响应地应用填充...

large 及以上，5 个左/右填充单元
sm 和 md，3 个左右填充单元
xs，1 个左/右填充单元

因此，nav-items 也可以这样做...

<ul class="navbar-nav">
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Profile</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Statistics</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Polls</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Settings</button>
    </li>
</ul>

当然，你可以根据需要更改p-{breakpoint}-{value}。

Demo

【讨论】：

是的，我现在发现我不应该将 px-lg-5 类与 navbar-nav 类一起使用，但使用 navbar-link 类可以完全解决问题！跨度>

【解决方案2】：

您的nav 仅限于div 的容器大小。如果您删除 auto 类并添加 w-100 以获得完整宽度并添加一些 flex 类，则可以拉伸导航。

一个例子：

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <div class="container-fluid padding-left">
        <div class="row flex-xl-nowrap">
            <div class="col-4 bg-success">
            </div>
            <div class="col-8 bg-info">
                <nav class="navbar navbar-expand navbar-light w-100">

                        <ul class="navbar-nav mr-md-5 mr-lg-5 mr-xl-5  d-flex justify-content-between w-100">
                            <li class="nav-item">
                                <button class="nav-link" href="#">Profile</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" href="#">Statistics</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" href="#">Polls</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" href="#">Settings</button>
                            </li>
                        </ul>

                </nav>
            </div>
        </div>

    </div>

【讨论】：

这几乎是正确的，问题是现在在移动设备上导航栏太靠右了，我还是不明白为什么，（谢谢）。
@AndreaDattero 你能展示一张图片吗？一张图片需要 10000 字。谢谢！ :)
是的，我已经添加了一张图片，但是我们已经有关于这个主题的经过验证的答案，无论如何感谢您的帮助！
@AndreaDattero 很高兴你找到了答案！