javascript - 创建内联表单，Bootstrap

Question

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<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。
还有列应该包含在 row div 中。
Bootstrap 有 12 列网格，所以你的列的总和应该是 12。
这就是我更改 col-xs- 的原因3 到 col-xs-4(3 列大小为 4)。
您还应该将类 form-control 添加到输入中为了给他们适当的样式。

看看这段代码:

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form">
    <div class="container">
        <div class="row my-margin">
            <div class="col-xs-12">
                <input type="number" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <input type="number" class="form-control">
            </div>
            <div class="col-xs-4">
                <input type="number" class="form-control">
            </div>
            <div class="col-xs-4">
                <input type="number" class="form-control">
            </div>
        </div>
    </div>
</form>

我还建议您阅读 this Bootstrap 中的网格系统教程。