时间戳

首页 > 解决方案 > 导航栏中的行和容器无法正常工作

html - 导航栏中的行和容器无法正常工作

问题描述

在我的项目中，我使用的是引导程序 4。当我在导航栏内使用容器并在容器内使用行时，行并没有像应有的那样占用容器的全宽。我在这里错过了什么或奇怪的东西吗？

我的代码 -

    <!-- Wrapper -->
    <div class="wrapper">
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <a class="navbar-brand" href="#">Navbar</a>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                        <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>
                </div>
            </div>
        </nav>
    </div>
    <!-- End of wrapper -->

预期输出 - 行应占用容器的宽度。

实际输出 - 行不采用容器的宽度，而是仅在容器宽度为 1170 像素时采用 337 像素的宽度

标签： htmltwitter-bootstrapbootstrap-4

解决方案

没有理由在 Navbar 内使用网格 ( row, col)，并且网格不支持 Navbar content。只需使用container...

<div class="wrapper">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            <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>
    </nav>
</div>

https://codeply.com/p/0ybzGU0ugF

之所以“行不采用容器的宽度，而是仅在容器宽度为 1170 像素时采用 337 像素的宽度”，是因为container内部是 display:flex navbar，因此row成为一个 flexbox 子项，导致其宽度缩小。

推荐阅读