bootstrap 3 模态框 modal-body能用百分比吗
时间: 2023-12-09 14:05:59 浏览: 189
在 Bootstrap 3 模态框中,`modal-body` 的高度默认是根据内容自适应的,如果需要使用百分比设置 `modal-body` 的高度,可以通过以下方法实现:
1. 在 CSS 样式中给 `.modal-body` 添加 `height` 属性和 `overflow-y` 属性,例如:
```css
.modal-body {
height: 60%;
overflow-y: auto;
}
```
2. 将 `height` 的值设置成所需百分比,这样可以设置模态框内容区域的高度,并且当内容超出高度时会出现滚动条。
以下是一个示例代码:
```html
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body" style="height: 60%; overflow-y: auto;">
<!-- Modal Body Content -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
通过以上方法,你可以在 Bootstrap 3 模态框中使用百分比设置 `modal-body` 的高度,并且可以控制滚动条的显示。
阅读全文