Bootstrap 4内联表单全宽 [英] Bootstrap 4 inline form full width

问题描述

我有一个内联表单，旁边有一个搜索栏和一个搜索按钮.如何强制input-group div跨越Bootstrap 4中的整个列，并且最好不使用自定义CSS?

I have an inline form with a search bar and a search button next to it. How can I force the input-group div to span across the entire column in Bootstrap 4 and preferably without using custom 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年

Updated 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上垂直堆叠的全角输入:

Another option - full width input that stacks vertically on 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>

演示

这篇关于Bootstrap 4内联表单全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！