当我使用内联形式时,我遇到了一个问题,输入文本没有占用所有空间。 我知道这些信息,但我是 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 <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>
最佳答案
根据 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 <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>
关于html - 内联表单使输入文本全宽且响应迅速,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43654548/