Строка и контейнер внутри navbar не работают должным образом - PullRequest
Новая
       4

Строка и контейнер внутри navbar не работают должным образом

0 голосов
/ 28 февраля 2020

В моем проекте я использую bootstrap 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 -->

Ожидаемый вывод - строка должна принимать ширину контейнера.

Фактический вывод - строка вместо того, чтобы брать ширину контейнера, он принимает ширину 337 ​​пикселей, в то время как контейнер имеет ширину 1170 пикселей

1 Ответ

0 голосов
/ 28 февраля 2020

Нет причин использовать сетку (row, col) внутри Navbar, и сетка не поддерживается содержимым Navbar . Просто используйте 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

Причина "вместо того, чтобы брать ширину контейнера ширина только 337px, в то время как контейнер имеет ширину 1170px ", потому что container является дисплеем: flex внутри navbar и поэтому row становится дочерним элементом flexbox, вызывая его уменьшение в ширину.

...