javascript - AdminLTE 展开或全屏框

Question

AdminLTE一个基于Bootstrap.

我想知道是否可以box-widget扩展为全屏模式（第二个按钮）。

我正在寻找是否有任何 CSS 类或 JavaScript 提示可以使其正常工作。

AdminLTE我在文档中没有找到这样的东西。

Answer 1

我今天也遇到了同样的问题。我是这样做的。

HTML

<button type="button" class="toggle-expand-btn btn bg-yellow btn-sm"><i class="fa fa-expand"></i></button>

CSS

<style>
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
</style>

JS

$(".toggle-expand-btn").click(function (e) {
  $(this).closest('.box.box-warning').toggleClass('panel-fullscreen');
});

根据您的需要更改框和按钮类，它将被修复。希望它会奏效。

Answer 2

一个打开的盒子：<div class="box">

一个折叠的盒子：<div class="box collapsed-box">

然后当然改变按钮上的图标

Answer 3

您可以使用 Bootstrap 类获得全屏模式。