Bootstrap 4 - 扩大导航栏的内联表单输入答案

【问题标题】：Bootstrap 4 - widening a navbar's inline form inputBootstrap 4 - 扩大导航栏的内联表单输入
【发布时间】：2019-04-26 13:13:28
【问题描述】：

我有一个带有以下（主要是标准）代码的搜索输入：

<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">
        <!-- links -->
        <form class="form-inline my-2 my-lg-0" action="{{ path('_store_search_results') }}">
            <div class="input-group">
                <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
                </div>
            </div>
        </form>
    </div>

我希望输入范围更广，但我不知道该怎么做。我试过给我的input-group div 一个row 类，输入本身有一个col-3 类，但这实际上是缩小而不是扩大输入。我不确定还能尝试什么。

【问题讨论】：

您能否创建一个从您的代码中截取的工作代码并添加带有您预期结果的示例图像

标签： html css bootstrap-4

【解决方案1】：

根据需要使用实用程序类，例如d-inline w-100。如果您不希望输入全宽，请使用w-50、w-75 等...

<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="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- links -->
        <form class="mx-2 my-auto d-inline w-100" action="">
            <div class="input-group">
                <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
                </div>
            </div>
        </form>
    </div>
</nav>

演示：https://www.codeply.com/go/SW2f1PJUA3

另见：Bootstrap 4 — how to make 100% width of the search input in navbar?

【讨论】：