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

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