Bootstrap 4：在移动导航栏中展开搜索输入答案

【问题标题】：Bootstrap 4: Expand search input in mobile navbarBootstrap 4：在移动导航栏中展开搜索输入
【发布时间】：2021-10-25 23:33:32
【问题描述】：

我正在尝试使用搜索输入和下拉切换按钮构建导航栏，但搜索输入似乎被限制为 200 像素。请参阅下面的屏幕截图，我正在尝试消除输入和切换之间的差距，我尝试了 w-100 但没有任何运气。

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>    

    <div class="collapse navbar-collapse" id="navbarSupportedContent">          
        <ul class="navbar-nav ml-auto">             
            <li class="nav-item"><a href="/join" class="nav-link">Join</a></li>
            <li class="nav-item"><a href="/login" class="nav-link">Sign In</a></li>             
        </ul>
    </div>

截图：https://i.stack.imgur.com/qBHWe.png

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

我认为这里最好的做法是将搜索栏和切换按钮包裹在它们自己的 d-flex div 中，然后调整宽度。

我在这里做了一个 JS fiddle...https://jsfiddle.net/fatchild/qmc90okb/78/

看起来像这样，注意输入和切换的包装。

  <nav class="navbar navbar-light bg-light justify-content-between">
<div class="d-flex justify-content-end w-100"> <!-- THIS IS THE ADDITIONAL HTML -->
  <form class="form-inline pr-1 w-100"> <!-- SOME EXTRA STYLING TO MAKE IT WORK -->
    <input class="form-control" type="search" placeholder="Search" aria-label="Search">
  </form>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>   
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">          
  <ul class="navbar-nav ml-auto">             
    <li class="nav-item"><a href="/join" class="nav-link">Join</a></li>
    <li class="nav-item"><a href="/login" class="nav-link">Sign In</a></li>             
  </ul>
</div>

值得注意的是，目前这仅适用于较小的屏幕，因此请务必将 js fiddle 重新排列为较小的屏幕尺寸，然后从那里取出。

【讨论】：