Question

我正在使用 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>

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

现在的样子：

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

Answer 1

正如您see in the Bootstrap docs，间距实用程序类（填充和边距）具有响应性。例如...

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

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

大且向上，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

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

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

2 个答案: