Question

我正在使用bootstrap，并希望创建一个包含2行和提交按钮的表单。第一行应该有1个数字字段，其中第2行应该在第一行的正下方有3个数字字段。我是否使用如下所示的列和行类？

<form role="form">
 <div class="row">
   <input type="number" class="col-xs-12">
 </div>
 <div class="row">
   <input type="number" class="col-xs-3">
   <input type="number" class="col-xs-3">
   <input type="number" class="col-xs-3">
 </div>
</form>

感谢任何帮助！

Answer 1

您缺少一些重要的部分。

列列应添加到div而不是input。
此外，列应包含在{ {1}} div。
这就是为什么我将row更改为col-xs-3（3列大小） 4）。
你还应该在输入中添加类col-xs-4以便为它们提供合适的样式。

看看这段代码：

form-control

.my-margin {
    margin-bottom: 20px;
}

另外，我建议你在bootstrap中阅读关于网格系统的this教程。

Answer 2

内联表单可以使用 form-inline

完成

内联表格

为左对齐和内联块控件添加.form-inline到您的表单（不一定是a）。

wazaap的解决方案也很好。

Bootstrap form-inline reference

.input-num {
    margin-bottom: 10px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<form role="form">
 <div class="row col-xs-12 input-num">
     <input type="number" class="col-xs-12" placeholder="Enter a number"/>
 </div>
  <div class="container">
    <div class="row form-inline grp-num">
        <input type="number" placeholder="Enter a number"/>
        <input type="number" placeholder="Enter a number"/>
        <input type="number" placeholder="Enter a number"/>
    </div>
 </div>
</form>
</div>

创建内联表单，Bootstrap

2 个答案: