bootstrap 表单多列
时间: 2023-07-10 07:18:44 浏览: 52
要在 Bootstrap 表单中创建多列布局,你可以使用 Bootstrap 的栅格系统。以下是一个示例代码片段:
```html
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="col-md-6 mb-3">
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="col-md-4 mb-3">
<label for="input4">Input 4</label>
<input type="text" class="form-control" id="input4">
</div>
<div class="col-md-4 mb-3">
<label for="input5">Input 5</label>
<input type="text" class="form-control" id="input5">
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
```
在这个例子中,form-row 类用于创建行。然后,使用 col-md-* 类将每个输入框放置在所需的列中。在这个例子中,我们使用了两列和三列布局。如果需要更多列,可以添加更多的 col-md-* 类。注意,每行中的列的总和不能超过 12。
这应该能够帮助你在 Bootstrap 表单中创建多列布局。