bootstrap-4 - 在 Bootstrap 中，4 个导航栏元素在小屏幕分辨率下位于其他元素下方

Question

我是 BootStrap (4) 的新手，我有以下代码:

<header>
    <div class="container">
        <nav class="navbar navbar-light bg-light justify-content-between">
            <a class="navbar-brand">Brand</a>
            <form class="form-inline">
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="Search" aria-label="Search"  aria-describedby="SearchButton" id="Search">
                    <div class="input-group-append">
                        <span class="input-group-text" id="SearchButton"><i class="fa fa-search"></i></span>
                    </div>
                </div>
                <button id="PagePrev" class="btn btn-success"><i class="fa fa-angle-left"></i></button>
                <button id="PageNext" class="btn btn-success"><i class="fa fa-angle-right"></i></button>
            </form>
        </nav>
    </div>
</header>

当宽度 > 576 时，一切顺利，但在较小的宽度上，按钮会下降到输入下方。问题是:我如何将所有元素(输入和按钮)视为一个唯一的 block ？我尝试过“form-inline”，但是，当然，我错了。任何帮助都可以!

Answer 1

您需要包含 navbar-expand 类，以便导航栏在所有屏幕宽度下保持水平。另外，将 flex-nowrap 类添加到 form-inline...

<header>
    <div class="container">
        <nav class="navbar navbar-expand navbar-light bg-light justify-content-between">
            <a class="navbar-brand">Brand</a>
            <form class="form-inline flex-nowrap">
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="Search" aria-label="Search"  aria-describedby="SearchButton" id="Search">
                    <div class="input-group-append">
                        <span class="input-group-text" id="SearchButton"><i class="fa fa-search"></i></span>
                    </div>
                </div>
                <button id="PagePrev" class="btn btn-success"><i class="fa fa-angle-left"></i></button>
                <button id="PageNext" class="btn btn-success"><i class="fa fa-angle-right"></i></button>
            </form>
        </nav>
    </div>
</header>

https://www.codeply.com/go/kzachp9MQ1