bootstrap布局两列或者多列表单
时间: 2023-06-29 12:12:22 浏览: 63
可以使用Bootstrap的Grid系统来实现两列或多列的表单布局。以下是一个两列表单布局的示例代码:
```
<div class="container">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="5"></textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
```
在这个例子中,我们使用了一个`.container`容器和一个`.row`行来包含表单。我们使用了`.col-md-6`类来将表单分成两列,其中`md`表示中等屏幕尺寸(≥768px)时使用该类,`6`表示该列占据了12列栅格系统中的6列。
你可以根据需要添加更多的列和表单元素,只需要确保总列数不超过12列即可。