我在这里使用@dippas提供的解决方案 Inline form make input text full width and responsive 我的新请求是如何放置多个输入文本并填充所有空间。
我知道我们不能像引导网站中提到的那样使用内联形式的宽度
需要自定义宽度输入,选择和textareas是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 <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>
答案 0 :(得分:0)
您需要将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 <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>