html - 内联形式的多个输入框

我在这里使用@dippas提供的解决方案
Inline form make input text full width and responsive
我的新要求是如何放置多个输入文本并填充所有空间。

我知道我们不能在bootstrap网站中提到的内联形式中使用宽度


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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.form-inline {
  display: flex;
  padding:5px !important;
}

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

.flex input {
  flex: 1 !important ;
  padding-right:15px !important;

}
.form-inline .form-group {
  padding-right:15px !important;
}

</style>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4><b>Search Options</b></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="#" (click)="doAction('account_id')">Account ID</a></li>
            <li><a href="#" (click)="doAction('company_name')">Company Name</a></li>
            <li><a href="#" (click)="doAction('account_type')">Account Type</a></li>
            <li><a href="#" (click)="doAction('marketplaces')">Marketplaces</a></li>
          </ul>
        </div>
      </div>
        <div class="row" style="display: block">
          <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-danger"> Fermer </button>
          </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-danger"> Fermer </button>
          </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-danger"> Fermer </button>
          </div>
      </div>
    </form>
  </div>
</div>

最佳答案

您需要将display:flex添加到.row，因为现在.flex的父级是.row

/* !important only for this snippet */

.form-inline {
  display: flex;
  padding: 5px !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1
}

.flex {
  flex: 0 100%;
  display: flex !important
}

.flex input {
  flex: 1 !important;
  padding-right: 15px !important;
}

.form-inline .form-group {
  padding-right: 15px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4><b>Search Options</b></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="#" (click)="doAction('account_id')">Account ID</a></li>
            <li><a href="#" (click)="doAction('company_name')">Company Name</a></li>
            <li><a href="#" (click)="doAction('account_type')">Account Type</a></li>
            <li><a href="#" (click)="doAction('marketplaces')">Marketplaces</a></li>
          </ul>
        </div>
      </div>
      <div class="row">
        <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-danger"> Fermer </button>
        </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-danger"> Fermer </button>
        </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-danger"> Fermer </button>
        </div>
      </div>
    </form>
  </div>
</div>

关于html - 内联形式的多个输入框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43659590/