Question

我在使用R shinydashboard在custom.css文件中更改媒体查询时出现问题。我正在尝试调整侧面板的宽度，然后进行所有后续的适当更改。可以看到一个示例webapp here。起点是并且涉及到我的自定义sytlesheet的四个CSS更改：

<body...>
  <header...>   
  <div class="wrapper row-offcanvas row-offcanvas-left">
    <aside class="left-side sidebar-offcanvas">

当浏览器的宽度为768px或更高时，我将侧边栏的宽度从220px增加到240px（正常）：

.left-side {
    width: 240px;
}

由于侧边栏现在在折叠时突出20px，我将媒体查询从220px更改为240px（不会更改为220px）：

@media screen and (min-width: 768px)
.left-side.collapse-left {
    left: -240px;
}

补充工具栏现在需要向左移动，因此侧边栏的右边缘不会突出显示浏览器宽度为768px或更低（不能更改为220px）：

@media screen and (max-width: 768px)
.row-offcanvas-left .sidebar-offcanvas {
    left: -240px;
}

最后一次更改会将侧边栏向右移动，因此在折叠时不会偏离屏幕的左侧（不会更改为220px）：

@media screen and (max-width: 768px)
.row-offcanvas-left.active {
    left: 240px;
}

我可以在没有媒体查询的情况下更改它，但是媒体查询不会针对不同的浏览器宽度激活：

.left-side.collapse-left {
    left: -240px;
}

似乎我可以将AdminLTE.min.css中的更改更改为@media，但显然不是我想采用的方法。