Bootstrap 内联表单


内联表单

<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

需要手动设置宽度

在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline

@
  1. <form class="form-inline" role="form"> 
  2.   <div class="form-group"> 
  3.     <label class="sr-only" for="exampleInputEmail2">Email address</label> 
  4.     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
  5.   </div> 
  6.   <div class="form-group"> 
  7.     <div class="input-group"> 
  8.       <div class="input-group-addon">@</div> 
  9.       <input class="form-control" type="email" placeholder="Enter email"> 
  10.     </div> 
  11.   </div> 
  12.   <div class="form-group"> 
  13.     <label class="sr-only" for="exampleInputPassword2">Password</label> 
  14.     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
  15.   </div> 
  16.   <div class="checkbox"> 
  17.     <label> 
  18.       <input type="checkbox"> Remember me 
  19.     </label> 
  20.   </div> 
  21.   <button type="submit" class="btn btn-default">Sign in</button> 
  22. </form> 

 

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)