Inline form make input text full width and responsive

问题

I have a problem when I use inline-form the input text does not take all the space. I am aware of that information, but I am a bootstrap beginner.

Requires custom widths Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within. The default width of 100% as all form elements gets when they got the class form-control didn't apply if you use the form-inline class on your form.

Cordially

<div class="panel panel-primary">
  <div class="panel-heading"><h4>Search Options</h4></div>
  <div class="panel-body">
    <form class="form-inline">
        <div class="form-group">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle"
                      data-toggle="dropdown" aria-haspopup="true"
                      aria-expanded="false">
                Account ID &nbsp; <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Account ID</a></li>
                <li><a href="#">Company Name</a></li>
                <li><a href="#">Account Type</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Marketplaces</a></li>
              </ul>
            </div>
        </div>
        <div class="form-group">
            <input class="form-control" type="text"
                   value="" id="filter_id" placeholder="Put your filter here">
            <button type="button" class="btn btn-default"> Filtrer </button>
        </div>
    </form>
  </div>
</div>

回答1:

According to Docs

May require custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

EDIT

as per your comment:

the input text take the rest of space. I want inline all the elements in a single row and if a space is left the input text should take it

use flexbox

/* !important ONLY USED FOR SNIPPET */

.form-inline {
  display: flex
}

.flex {
  flex: 1;
  display: flex !important
}

.flex input {
  flex: 1 !important
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4>Search Options</h4>
  </div>
  <div class="panel-body">
    <form class="form-inline">
      <div class="form-group">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Account ID &nbsp; <span class="caret"></span>
              </button>
          <ul class="dropdown-menu">
            <li><a href="#">Account ID</a></li>
            <li><a href="#">Company Name</a></li>
            <li><a href="#">Account Type</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Marketplaces</a></li>
          </ul>
        </div>
      </div>
      <div class="form-group flex">
        <input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
        <button type="button" class="btn btn-default"> Filtrer </button>
      </div>
    </form>
  </div>
</div>

回答2:

Add a container as a 'context' in your markup and then use it to override your css in this specific context :

<div class="special-form">
  <!-- form -->
</div>

CSS

.special-form .panel .form-control {
    width: 100%;
}

来源：https://stackoverflow.com/questions/43654548/inline-form-make-input-text-full-width-and-responsive