Bootstrap 布局组件 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

表单


将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。

注意,.navbar-form.form-inline 的大部分代码都一样,内部实现使用了 mixin。 某些表单组件,例如输入框组,可能需要设置一个固定宽度,从而在导航条内有合适的展现。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

移动设备上的注意事项

在移动设备上,对于在 fixed 定位的元素内使用表单控件的情况有一些注意事项。请参考我们提供的浏览器支持情况相关的文档 。

为输入框添加 label 标签

如果你没有为输入框添加 label 标签,屏幕阅读器将会遇到问题。对于导航条内的表单,可以通过添加 .sr-only 类隐藏 label 标签。