在引导程序中，4 个导航栏元素在小屏幕分辨率下低于其他元素答案

【问题标题】：In the bootstrap 4 navbar elements goes under others on small screen resolutions在引导程序中，4 个导航栏元素在小屏幕分辨率下低于其他元素
【发布时间】：2018-05-21 22:18:08
【问题描述】：

我是 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 时一切顺利，但在较小的宽度上，按钮会在输入下方下降。问题是：我如何将所有元素（输入和按钮）视为一个独特的块？我已经尝试过“form-inline”，但当然，我错了。任何帮助都很好！

【问题讨论】：

标签： bootstrap-4

【解决方案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

【讨论】：