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>

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>

Demo

Answer 2

Bootstrap 4.3现在具有一个表格网格，它允许您指定列宽。这就是我最终将输入表单和按钮对齐为所需宽度的方式。

https://getbootstrap.com/docs/4.3/components/forms/#form-grid

<form class="form" method="get" action="/products">
  <div class="row">
    <div class="col-md-6 offset-md-2">
      <input type="text" class="form-control" name="search" placeholder="search products">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-outline-primary mb-2">Search</button>
    </div>
  </div>
</form>
<br>

Answer 3

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

See my Codeply.com demonstrating all solutions detailed below...

---

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

只需将类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>

---

移动

最终，您的选择可能会归结为您希望它在移动设备上的工作方式。您当然可以进一步纠缠代码，但是值得关注以下断点：