html - 内联表单使输入文本全宽且响应迅速

Question

当我使用内联形式时，我遇到了一个问题，输入文本没有占用所有空间。我知道这些信息，但我是 bootstrap 初学者。

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.

亲切

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

Answer 1

根据 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.

编辑

根据您的评论:

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

使用 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>