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

Answer 1

您希望将Navbar的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

在引导程序中，4个导航栏元素在小屏幕分辨率下进入其他元素

1 个答案: