/* 当页面过窄时，关闭右侧栏目，自动调整宽度 */
/* 默认样式，适用于较大屏幕 */
.col-9, .col-3 {
    float: left;
}


/* 当屏幕宽度小于768px时应用以下样式 */
@media (max-width: 768px) {
    .col-3 {
        display: none; /* 隐藏右侧消息框 */
    }
    .col-9 {
        width: 100%; /* 左侧栏目扩展至整个页面宽度 */
        float: none;
    }
}


/* 默认情况下，按钮隐藏，论文列表展开 */
.btn-collapse {
    display: none;
}
#collapsePapers.collapse {
    display: block;
}

/* 在小屏幕上显示按钮并设置论文列表为折叠状态 */
@media (max-width: 768px) {
    .btn-collapse {
        display: block; /* 显示按钮 */
    }
    #collapsePapers.collapse {
        display: none; /* 默认折叠论文列表 */
    }
    #collapsePapers.collapse.show {
        display: block; /* 当折叠被触发时显示论文列表 */
    }
}