bootstrap 3 模态框 栅格布局 DEMO
时间: 2023-08-04 07:07:06 浏览: 108
以下是一个示例,演示如何在 Bootstrap 3 模态框中使用栅格布局:
```html
<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">打开模态框</button>
<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<p>左侧内容</p>
</div>
<div class="col-md-6">
<p>右侧内容</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
```
在上面的示例中,我们在模态框的 `.modal-body` 中使用了 `.row` 和 `.col-md-6` 类来创建了一个两列的布局。您可以根据需要添加更多的列和行来实现自己的布局。
阅读全文