Bootstrap 布局组件 互动版

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

简介


通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

只支持文本输入框 <input>

这里请避免使用 <select> 元素,因为 WebKit浏览器不能完全绘制它的样式。 避免使用<textarea> 元素,由于它们的 rows 属性在某些情况下不被支持。

输入框组中的工具提示和弹出框需要特别的设置

.input-group 中所包含的元素应用工具提示(tooltip)或popover(弹出框)时,必须设置 container: 'body' 参数,为的是避免意外的副作用(例如,工具提示或弹出框被激活后,可能会让当前元素变得更宽或/和变得失去其圆角)。

不要和其他组件混用

不要将表单组或栅格列(column)类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。