Bootstrap 4 inline form full width

问题

I have an inline form with a search bar and a search button next to it. How can I force the input-group div to span across the entire column in Bootstrap 4 and preferably without using custom 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>

回答1:

Updated 2018

Remove the 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

Another option - full width input that stacks vertically on 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

回答2:

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

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

Full-width search form with sticky button

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

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

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

<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 separate button without wrapper div

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

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

<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 ;)

Full-width search form with separate button with wrapper 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-100 to 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 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:

回答3:

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.

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>

来源：https://stackoverflow.com/questions/42844588/bootstrap-4-inline-form-full-width

标签

html

css

twitter-bootstrap

bootstrap-4