我有一个内联表单,旁边有一个搜索栏和一个搜索按钮.如何强制输入组div跨越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年更新
@H_404_8@删除表格内联..
<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>@H_404_8@演示:http://www.codeply.com/go/4eu7w6KPkT @H_404_8@另一个选项 – 在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>@H_404_8@Demo