Bootstrap 4内联表单全宽

Posted

技术标签:

【中文标题】Bootstrap 4内联表单全宽【英文标题】:Bootstrap 4 inline form full width 【发布时间】:2017-08-08 05:56:47 【问题描述】:

我有一个带有搜索栏和旁边的搜索按钮的内联表单。如何强制 input-group 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>

【问题讨论】:

【参考方案1】:

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>

Demo

【讨论】:

【参考方案2】:

您有三种可能的方式来实现以下两个布局选项:

See my Codeply.com demonstrating all solutions detailed below...


带有粘性按钮的全角搜索表单

只需将flex-fill 类添加到您的&lt;div class="form-group"&gt;

请注意,从上面的原始示例代码中,Bootstrap 4 已从使用 input-group-btn 更改为 input-group-append 以使按钮坚持关键字字段并正确处理圆角。 p>

最后,我还添加了一个aria-label 属性以满足您示例的可访问性要求。

<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 flex-fill">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with sticky button" class="form-control" aria-label="Search this site">
          <div class="input-group-append">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </div> 
        </div>
      </form>
    </div>
  </div>
</div>


带有独立按钮的全角搜索表单,没有包装div

对于此解决方案,您有两种选择,具体取决于您所需的 html 结构和项目的需要。

首先,您可以删除所有包装 div 并将类 flex-fill mr-2 添加到 &lt;input class="form-control"&gt;。这是最简单的选择。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/o wrapper div" class="flex-fill mr-2 form-control" aria-label="Search this site">
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

如果你有机会,我会选择这个解决方案,因为它可以生成最干净的 HTML ;)

带有分隔按钮的全角搜索表单和包装div

如果您的表单需要一些包装器 div(例如,由于与您的 CMS 作斗争),那么您必须与放置类的位置进行斗争:首先,将 &lt;div class="input-group"&gt; 替换为 &lt;div class="flex-fill mr-2"&gt;,添加类 w-100&lt;input class="form-control"&gt;,最后删除 &lt;div class="input-group-append"&gt; 包装器并将提交按钮移到 flex-fill 包装器之外。

<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="flex-fill mr-2">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/ wrapper div" class="form-control w-100" aria-label="Search this site">
        </div>
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

移动

最终,您的选择可能归结为您希望它如何在移动设备上运行。当然,您可以更进一步地处理代码,但值得查看以下断点:

【讨论】:

【参考方案3】:

Bootstrap 4.3 现在有一个表单网格,它允许您指定列宽。这就是我最终将输入表单和按钮排列成我想要的任何宽度的方式。

https://getbootstrap.com/docs/4.3/components/forms/#form-grid

<form class="form" method="get" action="/products">
  <div class="row">
    <div class="col-md-6 offset-md-2">
      <input type="text" class="form-control" name="search" placeholder="search products">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-outline-primary mb-2">Search</button>
    </div>
  </div>
</form>
<br>

【讨论】:

以上是关于Bootstrap 4内联表单全宽的主要内容,如果未能解决你的问题,请参考以下文章

如何更改引导内联日期选择器以适应全宽

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:内联表单

在移动设备上将 Bootstrap 布局从内联表单更改为网格

Twitter Bootstrap 内联表单间距

html Bootstrap内联表单

如何在导航栏中制作 Bootstrap 4 全宽下拉菜单?