html – Bootstrap 4内联形式全宽

概述我有一个内联表单,旁边有一个搜索栏和一个搜索按钮.如何强制输入组div跨越Bootstrap 4中的整个列,最好不使用自定义CSS？ <div class="container"> <div class="row"> <div class="col-md-12"> <form class="form-inline" action="/search" accept-chars 我有一个内联表单,旁边有一个搜索栏和一个搜索按钮.如何强制输入组div跨越bootstrap 4中的整个列,最好不使用自定义CSS？

<div >  <div >    <div >      <form  action="/search" accept-charset="UTF-8" method="get">        <div >          <input type="text" name="search" ID="search" value="test" placeholder="Search accounts,contracts and transactions" >          <span >            <input type="submit" name="commit" value="Search"  data-disable-with="Search">          </span>         </div>      </form>    </div>  </div></div>

解决方法 2018年更新

删除表格内联..

<div >  <div >    <div >      <form action="" accept-charset="UTF-8" method="get">        <div >          <input type="text" name="search" ID="search" value="test" placeholder="Search accounts,contracts and transactions" >          <span >            <input type="submit" name="commit" value="Search"  data-disable-with="Search">          </span>         </div>      </form>    </div>  </div></div>

演示：http://www.codeply.com/go/4eu7w6KPkT

另一个选项 – 在xs上垂直堆叠的全宽输入：

<div >        <div >            <form >                <div >                    <input type="text" name="search" ID="search" value="test" placeholder="Search accounts,contracts and transactions" >                </div>                <div >                    <input type="button" name="commit" value="Search" >                </div>            </form>        </div></div>

Demo

总结

以上是内存溢出为你收集整理的html – Bootstrap 4内联形式全宽全部内容，希望文章能够帮你解决html – Bootstrap 4内联形式全宽所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。