我有一个内联表单，旁边有一个搜索栏和一个搜索按钮。如何强制input-groupdiv跨越Bootstrap 4中的整个列，并且最好不使用自定义CSS？
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
<div class="input-group">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<span class="input-group-btn">
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</span>
</div>
</form>
</div>
</div>
</div>
更新于2018
删除form-inline..
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="" accept-charset="UTF-8" method="get">
<div class="input-group">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<span class="input-group-btn">
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</span>
</div>
</form>
</div>
</div>
</div>
演示：http：//www.codeply.com/go/4eu7w6KPkT
另一个选择-在xs上垂直堆叠的全宽输入：
<div class="row">
<div class="col-md-12">
<form class="row">
<div class="col-12 col-sm pr-sm-0">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
</div>
<div class="col-12 col-sm-auto pl-sm-0">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
</form>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句