Bootstrap 4 内联表单全宽

Question

我有一个内联表单，旁边有一个搜索栏和一个搜索按钮。我如何强制 input-group div 跨越 Bootstrap 4 中的整个列并且最好不使用自定义 CSS？

 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span>
        </div>
      </form>
    </div>
  </div>
</div>

原文由 migu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2018 年更新

删除 form-inline ..

 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <form action="" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span>
        </div>
      </form>
    </div>
  </div>
</div>

演示：http: //www.codeply.com/go/4eu7w6KPkT

另一种选择- 在 xs 上垂直堆叠的全宽输入：

 <div class="row">
        <div class="col-md-12">
            <form class="row">
                <div class="col-12 col-sm pr-sm-0">
                    <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
                </div>
                <div class="col-12 col-sm-auto pl-sm-0">
                    <input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
                </div>
            </form>
        </div>
</div>

演示

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过三种可能的方式来实现以下两个布局选项：

请参阅我的 Codeply.com 演示下面详述的所有解决方案……

---

带有粘性按钮的全角搜索表单

只需将类 flex-fill 添加到您的 <div class="form-group"> 。

请注意上面的原始示例代码，Bootstrap 4 已从使用 input-group-btn 更改为 input-group-append 以使按钮 _坚持关键字字段并正确处理圆角_。

最后，我还添加了一个 aria-label 属性以满足您示例的可访问性要求。

 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group flex-fill">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with sticky button" class="form-control" aria-label="Search this site">
          <div class="input-group-append">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

---

全角搜索表单，带有 单独 的按钮，没有包装 div

对于此解决方案，您有两种选择，具体取决于您所需的 HTML 结构和项目的需要。

首先，您可以删除所有包装 div 并将类 flex-fill mr-2 添加到 <input class="form-control"> 。这是最简单的选择。

 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/o wrapper div" class="flex-fill mr-2 form-control" aria-label="Search this site">
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

如果有机会，我会选择这个解决方案，因为它会生成最干净的 HTML ；）

全宽搜索表单，带有 单独 的按钮和包装器 div

如果您的表单需要一些包装 div（例如，由于与您的 CMS 作斗争），那么您必须与放置类的位置作斗争：首先，将 <div class="input-group"> 替换为 --- <div class="flex-fill mr-2"> ，添加类 w-100 到 <input class="form-control"> ，最后删除 <div class="input-group-append"> 包装器并将提交器移到 flex-fill 按钮外。

 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="flex-fill mr-2">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/ wrapper div" class="form-control w-100" aria-label="Search this site">
        </div>
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

---

移动的

最终，您的选择可能归结为您希望它如何在移动设备上运行。您当然可以进一步讨论代码，但值得查看以下断点：

原文由 JamesWilson 发布，翻译遵循 CC BY-SA 4.0 许可协议