CSS/HTML：如何使左侧 div 在最小化浏览器时响应折叠答案

【问题标题】：CSS/HTML: How to make a left side div responsive that collapse when minimized the browserCSS/HTML：如何使左侧 div 在最小化浏览器时响应折叠
【发布时间】：2016-08-11 05:29:49
【问题描述】：

所以我有两个分割页面主体的 div，但是当用户最小化页面时我需要折叠左侧 div。当它单击折叠的侧 div 时，它会返回到上一个。

html

<div class="" style="display:flex; min-height:700px;">
        <div class="left_temp_sider">
            DIV1
        </div>
        <div class="right_temp_sider">
            DIV2
        </div>
</div>

css

.left_temp_sider{
   min-width: 300px;
   margin-top:70px;
   padding:20px 0px 20px 35px; 
}
.right_temp_sider{
   flex:1;
}

【问题讨论】：

向我们展示你尝试过的东西？
尝试使用媒体查询css
只使用引导程序
你在使用引导程序吗？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： javascript jquery html css flexbox

【解决方案1】：

尝试媒体查询：需要重置 min-width 而不是 max-width

@media screen and (max-width: 600px) {
    .left_temp_sider{
         min-width: 50px;

    }
}

如果您的视口宽度小于 600 像素，则将应用在 @media 中指定的 CSS 规则。

【讨论】：