Bootstrap 4 行内表格全角
Bootstrap 4 inline form full width
我有一个内嵌表单，旁边有一个搜索栏和一个搜索按钮。如何强制 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>
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>
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>
您可以通过三种可能的方式来实现以下两个布局选项：
See my Codeply.com demonstrating all solutions detailed below...
Full-width 带有粘滞按钮的搜索表单
只需将 class flex-fill 添加到您的 <div class="form-group">.
请注意上面的原始示例代码，Bootstrap 4 已从使用 input-group-btn 更改为 input-group-append 以使按钮 固定在关键字字段上，并且正确处理圆角.
最后，我还添加了一个 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>
Full-width 带有 单独 按钮的搜索表单 div
对于此解决方案，您有两种选择，具体取决于您想要的 HTML 结构和项目需求。
首先，您可以删除所有包装器 div 并将 classes flex-fill mr-2 添加到 <input class="form-control">。这是最简单的选择。
<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 ;)
Full-width 带有 带有包装器的单独 按钮的搜索表单 div
如果您的表单需要一些包装器 divs，（例如，由于与您的 CMS 作斗争）那么您必须与放置 classes 的位置作斗争：首先，替换 <div class="input-group"> 和 <div class="flex-fill mr-2">，将 class w-100 添加到 <input class="form-control">，最后删除 <div class="input-group-append"> 包装并将提交按钮移到 [=80= 之外]包装纸。
<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>
手机
最终，您的选择可能会归结为您希望它在移动设备上的工作方式。您当然可以进一步讨论代码，但值得查看以下断点：
我有一个内嵌表单，旁边有一个搜索栏和一个搜索按钮。如何强制 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>
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>
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>
您可以通过三种可能的方式来实现以下两个布局选项：
See my Codeply.com demonstrating all solutions detailed below...
Full-width 带有粘滞按钮的搜索表单
只需将 class flex-fill 添加到您的 <div class="form-group">.
请注意上面的原始示例代码，Bootstrap 4 已从使用 input-group-btn 更改为 input-group-append 以使按钮 固定在关键字字段上，并且正确处理圆角.
最后，我还添加了一个 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>
Full-width 带有 单独 按钮的搜索表单 div
对于此解决方案，您有两种选择，具体取决于您想要的 HTML 结构和项目需求。
首先，您可以删除所有包装器 div 并将 classes flex-fill mr-2 添加到 <input class="form-control">。这是最简单的选择。
<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 ;)
Full-width 带有 带有包装器的单独 按钮的搜索表单 div
如果您的表单需要一些包装器 divs，（例如，由于与您的 CMS 作斗争）那么您必须与放置 classes 的位置作斗争：首先，替换 <div class="input-group"> 和 <div class="flex-fill mr-2">，将 class w-100 添加到 <input class="form-control">，最后删除 <div class="input-group-append"> 包装并将提交按钮移到 [=80= 之外]包装纸。
<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>
手机
最终，您的选择可能会归结为您希望它在移动设备上的工作方式。您当然可以进一步讨论代码，但值得查看以下断点：