html – Bootstrap 4内联形式全宽
发布时间:2020-12-24 16:05:19 所属栏目:资源 来源:网络整理
导读:我有一个内联表单,旁边有一个搜索栏和一个搜索按钮.如何强制输入组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" m
我有一个内联表单,旁边有一个搜索栏和一个搜索按钮.如何强制输入组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年更新删除表格内联.. <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> Demo (编辑:好传媒网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |