- 首页
- 前端开发
- 内联表单嵌套在 Bootstrap 3 中的水平表单中
内联表单嵌套在 Bootstrap 3 中的水平表单中
[英] Inline Form nested within Horizontal Form in Bootstrap 3
本文介绍了内联表单嵌套在 Bootstrap 3 中的水平表单中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想像这样在 Bootstrap 3 中构建一个表单:
我的网站(不是上面的链接)只是从 Bootstrap 2.3.2 更新，格式不再正确.
我在 getbootstrap.com 上找不到关于此类表单的任何文档.
谁能告诉我怎么做?只有用户名"就可以了.
谢谢.
PS 有一个 类似的问题，但它使用的是 Bootstrap 2.3.2.
解决方案
我已经创建了一个演示给你.
以下是 Bootstrap 3 中的嵌套结构:
<label for="birthday" class="col-xs-2 control-label">生日</label><div class="col-xs-10"><div class="form-inline"><div class="form-group"><input type="text" class="form-control" placeholder="year"/>
<div class="form-group"><input type="text" class="form-control" placeholder="月"/>
<div class="form-group"><input type="text" class="form-control" placeholder="day"/>
注意整个 form-inline 是如何嵌套在包含水平表单控件的 col-xs-10 div 中的.换句话说，整个form-inline就是主横向表单中生日标签的控件".
注意，将内联表单嵌套在水平表单中会遇到左右边距问题.要解决此问题，请将其添加到您的 css 中:
.form-inline .form-group{左边距:0；右边距:0;}
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
解决方案
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
这篇关于内联表单嵌套在 Bootstrap 3 中的水平表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
