输入上方带有标签的内联引导表单布局

作者

我想使用Bootstrap 3创建一个具有以下布局的表单：

我在这里尝试了一个JSFIDLE：http://jsfiddle.net/quyB6/

以及我尝试过的标记：

&lt；表格&gt；
&lt；div class=“表格组col-md-4”&gt；
&lt；标签for=“name”class=“control label”&gt；线条高度&lt/标签&gt；
&lt；输入type=“number”值=“”class=“表单控制”id=“lineHeight”&gt；
&lt/部门&gt；
&lt；div class=“表格组col-md-4”&gt；
&lt；标签for=“name”class=“control label”&gt；填充顶部&lt/标签&gt；
&lt；输入type=“number”value=''class=“form control”id=“paddingTop”/&gt；
&lt/部门&gt；
&lt；div class=“表格组col-md-4”&gt；
&lt；标签for=“name”class=“control label”&gt；填充底部&lt/标签&gt；
&lt；输入type=“number”值=“”class=“表单控制”id=“paddingBottom”&gt；
&lt/部门&gt；
&lt/部门&gt；

我认为最简单的解决方案是将col-xs-4添加到每个div的类中。这将确保jsfiddle示例中的div是内联的。此外，应使用关闭表单标记&lt/表格&gt

&lt；表格&gt；
&lt；div class=“表格组col-xs-4 col-md-4”&gt；
&lt；标签for=“name”class=“control label”&gt；线条高度&lt/标签&gt；
&lt；输入type=“email”value=''class=“form control”id=“name”placeholder=“Ime”&gt；
&lt/部门&gt；
&lt；div class=“表格组col-xs-4 col-md-4”&gt；
&lt；标签for=“name”class=“control label”&gt；填充顶部&lt/标签&gt；
&lt；输入type=“email”value=''class=“form control”id=“name”placeholder=“Ime”&gt；
&lt/部门&gt；
&lt；div class=“表格组col-xs-4 col-md-4”&gt；
&lt；标签for=“name”class=“control label”&gt；填充底部&lt/标签&gt；
&lt；输入type=“email”value=''class=“form control”id=“name”placeholder=“Ime”&gt；
&lt/部门&gt；
&lt/表格&gt；

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with