Bootstrap 4 在引导程序中，4个导航栏元素在小屏幕分辨率上位于其他元素之下

我是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时，一切正常，但在较小的宽度上，按钮在输入下下降。问题是：如何将所有元素（输入和按钮）视为唯一块？我尝试过“表单内联”，但是，当然，我错了。任何帮助都可以

您需要包含

navbar expand

类，使navbar在所有屏幕宽度上保持水平。另外，将

flex nowrap

类添加到

表单内联

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