AdminLTE 展开或全屏框

Question

AdminLTE 基于 Bootstrap.

的管理模板

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

我正在寻找是否有任何 CSS class 或 JavaScript 提示可以使它起作用。

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

Answer 1

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

Answer 2

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

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

然后当然要更改按钮上的图标

Answer 3

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

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');
});

根据您的需要更改框和按钮class，它会被修复。希望有用。

AdminLTE 展开或全屏框

AdminLTE Expand or Fullscreen boxes

javascript

css

adminlte