内联表单使输入文本全宽并响应

Question

当我使用 inline-form 输入文本没有占用所有空间时，我遇到了问题。 我知道这些信息，但我是一个引导初学者。

需要自定义宽度输入、选择和文本区域的宽度为 100% Bootstrap 中的默认设置。要使用内联表单，您必须设置一个 宽度上使用的表单控件。默认宽度 100% 为 所有表单元素在获得类 form-control 时都没有 如果您在表单上使用 form-inline 类，则适用。

真诚的

<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

可能需要自定义宽度

默认情况下，输入和选择在 Bootstrap 中应用 width: 100%;。 在内联表单中，我们将其重置为 width: auto;这么多 控件可以位于同一行。根据您的布局， 可能需要额外的自定义宽度。

编辑

根据您的评论：

输入文本占据剩余空间。我想内联所有元素 在单行中，如果留有空格，则输入文本应使用它

使用弹性盒

/* !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>

Answer 2

在您的标记中添加一个容器作为“上下文”，然后在此特定上下文中使用它来覆盖您的 css：

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

CSS

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