Bootstrap 4 - 内联表单上的全宽表单域

Question

Bootstrap 4 - 内联表单上的全宽表单域

453*_*066 5 html css css-selectors twitter-bootstrap bootstrap-4

我注意到旧 Bootstrap v3 和新 Bootstrap V4 之间的内联表单的行为方式有所不同。

我有两个代码片段：

引导程序 3

在这个版本中，当页面变窄时，每个表单元素都会调整大小以占据页面的整个宽度。Bootstrap 4 不再发生这种情况。我看不到Bootstrap 3 文档提到了这种全角行为 - 但它仍然这样做 - 因为，这些字段在内联表单上仍然是全角的在一个form-groupdiv 中。

<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>

Run Code Online (Sandbox Code Playgroud)

引导程序 4

现在，在 Bootstrap 4 中使用相同的 HTML 时，不再发生全角行为。与 Bootstrap 3 一样，我在Bootstrap 4 文档中的内联表单的较窄页面上看不到对全角表单字段的任何引用。

<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>

Run Code Online (Sandbox Code Playgroud)

我想知道是否有人知道在 Bootstrap 4 中复制行为的方法，以便表单字段以与 Bootstrap 3 中相同的方式全宽？

我不想class='form-inline'从表单中删除，因为我想让表单在更宽的屏幕上显示为内联。

Answer 1

and*_*eas 1

方案一：`.form-inline`不分组

根据文档.inline-form，您可以简单地在元素上使用该类<form>，而无需对单个输入元素进行分组（只需删除相应的<div class="form-group">元素）。

有关调整断点的信息，请参阅文档中的 响应断点部分。

这是工作示例（全屏观看并更改视口宽度以查看效果）：

<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>

Run Code Online (Sandbox Code Playgroud)

解决方案2：`.input-group`代替`.form-group`

如果您仍想对输入元素进行分组，可以将.form-groupelements 更改为.input-groupelements。请参阅文档中有关多输入的部分。

这是工作示例（全屏观看并更改视口宽度以查看效果）：

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，9 月前
查看次数：	7943 次
最近记录：	7 年，9 月前

Bootstrap 4 - 内联表单上的全宽表单域

引导程序 3

引导程序 4

方案一：.form-inline不分组

解决方案2：.input-group代替.form-group

方案一：`.form-inline`不分组

解决方案2：`.input-group`代替`.form-group`