调整大小时使3列变为折叠式
调整大小时使3列变为折叠式
提问于 2017-03-17 02:04:40
我需要一个3栏页面的显示变成一个手风琴时，在智能手机上查看。我已经看过是否有任何示例或教程，但我没有遇到任何。我发现标签页变成了手风琴，但是，这是一个有3列的基本页面，当它被调整到一个较小的屏幕尺寸时，它需要变成一个手风琴。任何链接或建议都将非常感谢。
回答 4
Stack Overflow用户
发布于 2017-03-17 03:50:47
您可以使用flexbox来完成此操作
.container {
display: flex;
}
.container > div {
flex: 1;
height: 150px;
border: 1px solid gray;
transition: flex 0.5s;
}
@media screen and (max-width: 800px) {
.container > div {
flex: 0;
}
.container > div:nth-child(1) {
flex: 1;
}
.container:hover > div {
flex: 0;
}
.container > div:hover {
flex: 1;
}
} <div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
Stack Overflow用户
发布于 2017-03-17 02:56:21
试试这个：
index.html
<body>
<div class="container">
<div class="section section--1">Section 1</div>
<div class="section section--2">Section 2</div>
<div class="section section--3">Section 3</div>
</div>
</body>style.css
.container {
column-count: 3;
column-gap: 24px;
width: 100%;
}
.section {
display: block;
height: 200px;
color: #fff;
}
.section--1 { background-color: red; }
.section--2 { background-color: blue; }
.section--3 { background-color: green; }
/* small screen */
@media (max-width: 767px) {
.container {
column-count: 1;
}
}我希望我能帮到你。
Stack Overflow用户
发布于 2017-03-17 04:15:00
下面是一个示例，当在480px (或任何宽度)或更小的屏幕上查看时，使用几行jQuery将collapse值添加到Bootstrap的data-toggle属性中。
$(function(){
if($(window).width() <= 480) {
$("#col1, #col2").attr("data-toggle", "collapse");
}
})备注：如果你只是在调整浏览器的大小，你必须刷新你的页面(并确保你将Fiddle窗口的大小调整到小于480px才能看到效果)，但它仍然会使你的列在移动设备上手风琴，同时通常在更大的屏幕上显示内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42841680
复制相关文章
相似问题
腾讯云开发者
