Bootstrap 4 - 导航栏搜索表单最小宽度答案

【问题标题】：Bootstrap 4 – navbar search form min widthBootstrap 4 - 导航栏搜索表单最小宽度
【发布时间】：2018-12-01 20:42:45
【问题描述】：

如何在 Bootstrap 4 导航栏中使用最小宽度制作 100% 宽度的搜索表单？我的标记在这里：https://jsfiddle.net/bfsrjo23/

<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
    </ul>
</div>
<form class="w-100 py-2">
    <input type="text" class="form-control border" placeholder="Search...">
</form>

我将表单放在折叠之外以使其始终可见（第一行是笔记本电脑，第二行是移动设备）。除了平板模式（视口宽度约为 880 像素）外，它工作正常，搜索框太短。如果尺寸不通过，我想添加“最小宽度”并让表单进入第二行。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

像这样使用 css：

#yourformId > .input-group {
  display: inline;
}

【讨论】：

像这样使用css
BS4 具有 d-inline 类，但它仍然忽略 min-width（切割宽度以适应或溢出导航）。如果没有达到最小宽度，我想在第二行拆分搜索框。

【解决方案2】：

只需在导航中添加类 d-inline，如下所示：

<nav class="navbar navbar-expand-md navbar-light d-inline bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
    </ul>
</div>
<form class="w-100 py-2">
    <input type="text" class="form-control border" placeholder="Search...">
</form>

【讨论】：

这会毁掉所有的导航栏——它现在是 3 行（标志、菜单、搜索），没有背景。我想在第一行继续搜索，直到它适合最小尺寸，然后将它移到第二行。 BS4 flexbox navbar 可以吗？
是的，你可以那样做。

【解决方案3】：

找到可接受的解决方案 - 关键是从 css 中删除 flex-wrap:wrap，例如使用 @media(min-width:992px)，搜索表单必须具有“display:flex;flex-basis:100%”或“width :100%”。这会将搜索移到第二行。

【讨论】：