Bootstrap 4 - 内联表单上的全宽表单字段
Posted
技术标签:
【中文标题】Bootstrap 4 - 内联表单上的全宽表单字段【英文标题】：Bootstrap 4 - full width form fields on inline form 【发布时间】：2018-09-24 12:39:22 【问题描述】：我注意到旧 Bootstrap v3 和新 Bootstrap V4 之间的内联表单的行为方式有所不同。
我有两个代码sn-ps：
引导程序 3
在这个版本中，当页面变窄时，每个表单元素都会调整大小以占据页面的整个宽度。 Bootstrap 4 不再发生这种情况。我看不到 Bootstrap 3 docs 虽然提到了这种全角行为 - 但它仍然这样做 - 例如，当字段位于内联表单时，它们仍会变为全角在form-group div 中。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h1>bootstrap/3.3.6</h1>
<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
<input type='hidden' name='method' value='search' />
<div class='form-group'>
<input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
</div>
<div class='form-group'>
<select name='mn' id='mn' class='form-control'>
<option value='n'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
</select>
</div>
<div class='form-group'>
<select class='form-control' name='yr' id='yr'>
<option value='n'>Year</option>
<option value='1995'>1995</option>
<option value='1996'>1996</option>
</select>
</div>
<div class='form-group'>
<select name='format' id='format' class='form-control'>
<option value='n'>Format</option>
<option value='1'>1</option>
</select>
</div>
<div class='form-group'>
<select name='week_end_or_not' id='week_end_or_not' class='form-control'>
<option value='n'>Weekend Or Not</option>
<option value='week'>Week Days</option>
<option value='weekend'>Weekend</option>
</select>
</div>
<div class='form-group'>
<select name='work_days' id='work_days' class='form-control'>
<option value='n'>Work Days?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</div>
<div class='form-group'>
<select name='exact_phrase' id='exact_phrase' class='form-control'>
<option value='n'>Exact Phrase?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</div>
<button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>引导程序 4
现在在 Bootstrap 4 中使用相同的 html 时，不再出现全角行为。与 Bootstrap 3 一样，我在 the Bootstrap 4 docs 的内联表单的较窄页面上看不到对全角表单字段的任何引用。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>bootstrap/4.0.0</h1>
<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
<input type='hidden' name='method' value='search' />
<div class='form-group'>
<input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
</div>
<div class='form-group'>
<select name='mn' id='mn' class='form-control'>
<option value='n'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
</select>
</div>
<div class='form-group'>
<select class='form-control' name='yr' id='yr'>
<option value='n'>Year</option>
<option value='1995'>1995</option>
<option value='1996'>1996</option>
</select>
</div>
<div class='form-group'>
<select name='format' id='format' class='form-control'>
<option value='n'>Format</option>
<option value='1'>1</option>
</select>
</div>
<div class='form-group'>
<select name='week_end_or_not' id='week_end_or_not' class='form-control'>
<option value='n'>Weekend Or Not</option>
<option value='week'>Week Days</option>
<option value='weekend'>Weekend</option>
</select>
</div>
<div class='form-group'>
<select name='work_days' id='work_days' class='form-control'>
<option value='n'>Work Days?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</div>
<div class='form-group'>
<select name='exact_phrase' id='exact_phrase' class='form-control'>
<option value='n'>Exact Phrase?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</div>
<button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>我想知道是否有人知道在 Bootstrap 4 中复制行为的方法，以便表单字段像在 Bootstrap 3 中一样全宽？
我不想从表单中删除class='form-inline'，因为我想让表单在更宽的屏幕上显示为内联。
【问题讨论】：
【参考方案1】：解决方案 1：.form-inline 不分组
根据the documentation，您可以简单地在<form> 元素上使用.inline-form 类，而无需对单个输入元素进行分组（只需删除相应的<div class="form-group"> 元素）。
有关调整断点，请参阅Responsive Breakpoints section in the documentation。
这是工作示例（全屏观看并更改视口宽度以查看效果）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>bootstrap/4.0.0</h1>
<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
<input type='hidden' name='method' value='search' />
<input type='text' class='form-control' id='str' name='str' placeholder='Search'>
<select name='mn' id='mn' class='form-control'>
<option value='n'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
</select>
<select class='form-control' name='yr' id='yr'>
<option value='n'>Year</option>
<option value='1995'>1995</option>
<option value='1996'>1996</option>
</select>
<select name='format' id='format' class='form-control'>
<option value='n'>Format</option>
<option value='1'>1</option>
</select>
<select name='week_end_or_not' id='week_end_or_not' class='form-control'>
<option value='n'>Weekend Or Not</option>
<option value='week'>Week Days</option>
<option value='weekend'>Weekend</option>
</select>
<select name='work_days' id='work_days' class='form-control'>
<option value='n'>Work Days?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<select name='exact_phrase' id='exact_phrase' class='form-control'>
<option value='n'>Exact Phrase?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>解决方案 2：.input-group 而不是 .form-group
如果您仍想对输入元素进行分组，可以将 .form-group 元素更改为 .input-group 元素。请参阅the documentation 中关于多输入的部分。
这是工作示例（全屏观看并更改视口宽度以查看效果）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>bootstrap/4.0.0</h1>
<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
<input type='hidden' name='method' value='search' />
<div class='form-group'>
<input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
</div>
<div class='input-group'>
<select name='mn' id='mn' class='form-control'>
<option value='n'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
</select>
</div>
<div class='input-group'>
<select class='form-control' name='yr' id='yr'>
<option value='n'>Year</option>
<option value='1995'>1995</option>
<option value='1996'>1996</option>
</select>
</div>
<div class='input-group'>
<select name='format' id='format' class='form-control'>
<option value='n'>Format</option>
<option value='1'>1</option>
</select>
</div>
<div class='input-group'>
<select name='week_end_or_not' id='week_end_or_not' class='form-control'>
<option value='n'>Weekend Or Not</option>
<option value='week'>Week Days</option>
<option value='weekend'>Weekend</option>
</select>
</div>
<div class='input-group'>
<select name='work_days' id='work_days' class='form-control'>
<option value='n'>Work Days?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</div>
<div class='input-group'>
<select name='exact_phrase' id='exact_phrase' class='form-control'>
<option value='n'>Exact Phrase?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</div>
<button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>【讨论】：
感谢@andreas 完美运行。感谢您抽出宝贵时间整理出如此有用的回复。【参考方案2】：只需从您的代码中删除 '.form-group' div，您需要为 767 分辨率添加媒体查询。 在 Bootstrap 4 中 - 输入在 576px 宽屏幕以下获得 100% 的宽度。
@media (max-width: 767px)
.form-inline .form-control
display: block;
width: 100%;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>bootstrap/4.0.0</h1>
<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
<input type='hidden' name='method' value='search' />
<input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
<select name='mn' id='mn' class='form-control'>
<option value='n'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
</select>
<select class='form-control' name='yr' id='yr'>
<option value='n'>Year</option>
<option value='1995'>1995</option>
<option value='1996'>1996</option>
</select>
<select name='format' id='format' class='form-control'>
<option value='n'>Format</option>
<option value='1'>1</option>
</select>
<select name='week_end_or_not' id='week_end_or_not' class='form-control'>
<option value='n'>Weekend Or Not</option>
<option value='week'>Week Days</option>
<option value='weekend'>Weekend</option>
</select>
<select name='work_days' id='work_days' class='form-control'>
<option value='n'>Work Days?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<select name='exact_phrase' id='exact_phrase' class='form-control'>
<option value='n'>Exact Phrase?</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>这里是菲德尔Demo
【讨论】：
谢谢@Minal Chauhan - 我会将此作为接受的答案，但安德烈亚斯首先回答。感谢您的帮助。 没问题，先到先得以上是关于Bootstrap 4 - 内联表单上的全宽表单字段的主要内容，如果未能解决你的问题，请参考以下文章
在移动设备上将 Bootstrap 布局从内联表单更改为网格