Bootstrap 3 width:100% CSS 类名
时间: 2023-07-15 11:10:49 浏览: 63
在 Bootstrap 3 中,使用 `class="container-fluid"` 来设置宽度为100%的容器。可以像下面这样使用:
```
<div class="container-fluid">
<!-- 这里是内容 -->
</div>
```
也可以使用 `class="row"` 来创建行,然后在行内使用 `class="col-xs-12"` 来设置列宽度为100%。像下面这样:
```
<div class="row">
<div class="col-xs-12">
<!-- 这里是内容 -->
</div>
</div>
```
相关问题
bootstrap3模态框全屏
要实现Bootstrap 3模态框全屏,可以按照以下步骤进行操作:
1. 首先,在模态框中添加自定义CSS类名,例如“full-screen-modal”:
```
<div class="modal fade full-screen-modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal Content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
2. 然后,在全局CSS文件中添加以下代码:
```
.full-screen-modal .modal-dialog {
margin: 0;
max-width: 100%;
height: 100%;
padding: 0;
}
.full-screen-modal .modal-content {
height: 100%;
border-radius: 0;
}
```
这样就可以将模态框全屏显示了。注意,由于全屏模态框会覆盖整个页面,因此建议在模态框中添加关闭按钮,以便用户可以随时关闭模态框。
bootstrap modal可移动
是的,Bootstrap Modal 可以移动。你可以在 Modal 的标题栏上添加一个可拖动的元素,使用户可以通过拖动来移动 Modal。以下是一个示例:
HTML 代码:
```
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<div class="move-modal"></div>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
CSS 代码:
```
.move-modal {
cursor: move;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 9999;
}
```
JavaScript 代码:
```
$(document).ready(function() {
var $dragging = null;
$(document.body).on("mousemove", function(e) {
if ($dragging) {
$dragging.offset({
top: e.pageY - $dragging.outerHeight() / 2,
left: e.pageX - $dragging.outerWidth() / 2
});
}
});
$(document.body).on("mousedown", ".move-modal", function(e) {
$dragging = $(e.target).closest(".modal-dialog");
});
$(document.body).on("mouseup", function(e) {
$dragging = null;
});
});
```
这段代码添加了一个类名为 `move-modal` 的元素到 Modal 的标题栏中,通过 JavaScript 实现了拖动 Modal 的功能。请注意,这段代码使用了 jQuery,需要在页面中引入 jQuery 库。