搜索
搜索

Bootstrap 4-内联表单上的全宽表单字段

4532066 发表于 Dev
32
4532066

我注意到旧的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>

引导程序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>

我想知道是否有人知道一种在Bootstrap 4中复制行为的方法，以便表单域以与Bootstrap 3中相同的方式变为全角？

我不想class='form-inline'从表单中删除，因为我希望表单在更宽的屏幕上显示为嵌入式。

安德烈亚斯

解决方案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>

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

如果仍要对输入元素进行分组，则可以将.form-group元素更改为.input-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' />
   <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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap 4内联表单全宽

表单字段选择始终向下增长-Bootstrap 4

Bootstrap内联表单字段的顶部和底部不对齐

如何使用Bootstrap使某些表单字段内联

Bootstrap 4：内联表单按钮高度

在Bootstrap 4中无法看到文本的响应表压缩表单字段

我想将一类 bootstrap 4 绑定到表单字段

Bootstrap 4表单验证

Bootstrap 4字段在表单组内联中未正确排列

Bootstrap 内联表单字段 - 城市、州、邮编内联但带有标签而不是按钮

Bootstrap 4拆分按钮全宽

bootstrap 4 全宽下拉菜单

从 JSON 填充 Bootstrap 模态表单字段

在Django + Bootstrap中扩大表单字段

Bootstrap 3的表单字段布局问题

在Bootstrap 4的选择字段上内联显示标签

在 Bootstrap 4 中的输入字段上显示内联标签

Bootstrap 4，正在等待表单验证状态

bootstrap 4表单错误未显示

验证表单输入bootstrap4

Symfony Bootstrap 4 表单布局继承

使用 bootstrap 4 垂直对齐表单

重复行不对齐的 Bootstrap 4 表单

Bootstrap 4 - 最大宽度的列表单标签

Bootstrap表单字段在布局中不对齐

具有表单字段验证的React-Bootstrap Popover

表单字段不适合 Bootstrap 模式

Bootstrap表单字段不会保留在div中

Bootstrap Datepicker动态表单字段添加和删除

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档