twitter-bootstrap Bootstrap 4 内联表单全宽

Bootstrap 4 inline form full width

提问by migu

I have an inline form with a search bar and a search button next to it. How can I force the input-groupdiv to span across the entire column in Bootstrap 4 and preferably without using custom CSS?

我有一个带有搜索栏和旁边的搜索按钮的内联表单。如何强制input-groupdiv 跨越 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>

回答by Zim

Updated 2018

2018 年更新

Remove the form-inline..

删除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>

Demo: http://www.codeply.com/go/4eu7w6KPkT

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

Another option- full width input that stacks vertically on xs:

另一个选项- 在 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

演示

回答by JamesWilson

You have three possible ways to implement the following two layout options:

您有三种可能的方法来实现以下两个布局选项：

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

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

---

---

Full-width search form with sticky button

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

Just add class flex-fillto your <div class="form-group">.

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

Please note from your original example code above, Bootstrap 4 has changed from using input-group-btnto input-group-appendto make the button stick to the keyword field and handle the rounded corners correctly.

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

Finally, I've also added an aria-labelattribute to satisfy accessibility requirements to your example.

最后，我还添加了一个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>

---

---

Full-width search form with separatebutton without wrapper div

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

For this solution you have two options, depending on your desired HTML structure and needs of the project.

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

First, you could remove all the wrapper divs and add classes flex-fill mr-2to the <input class="form-control">. This is the easiest option.

首先，您可以删除所有包装 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>

If you have the chance, I would go with this solution as it produces the cleanest HTML ;)

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

Full-width search form with separatebutton with wrapper div

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

If your form requires some wrapper divs, (eg due to fighting against your CMS) then you have to battle with where you place the classes: First, replace the <div class="input-group">with <div class="flex-fill mr-2">, add class w-100to the <input class="form-control">, and finally delete the <div class="input-group-append">wrapper and move the submit button outside the flex-fill wrapper.

如果您的表单需要一些包装器 div（例如，由于与您的 CMS 冲突），那么您必须与放置类的位置作斗争：首先，替换<div class="input-group">with <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>

---

---

Mobile

移动的

Ultimately, your choice may boil down to how you want this to work on mobile. You can of course wrangle the code even further, but it is worth looking at the following breakpoints:

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

回答by random_user_0891

Bootstrap 4.3 now has a form-grid and it lets you specify the column widths. This is how I ended up getting my input form and button lined up to be whatever width I wanted.

Bootstrap 4.3 现在有一个表单网格，它允许您指定列宽。这就是我最终让我的输入表单和按钮排列成我想要的任何宽度的方式。

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

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>