當調整大小時，使3列變爲手風琴

我需要在智能手機上查看時顯示3列頁面以變成手風琴。我期待看看是否有任何示例或教程，但我沒有遇到任何問題。我發現改變標籤到手風琴，但這是一個基本的頁面，有3列，當它調整到一個較小的屏幕尺寸時，它需要改變成手風琴。任何鏈接或建議將不勝感激。當調整大小時，使3列變爲手風琴

來源

2017-03-16 William Hodge

確實可以！你有沒有已經嘗試過的東西的例子？ – scoopzilla

不，我還沒有找到任何東西。那就是問題所在。我能找到的唯一辦法是將標籤變成手風琴。 –

試試這個：

的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; 
    } 
}

我希望我能幫助你。

來源

2017-03-16 18:56:21

謝謝，但是，我需要一次調整小屏幕成爲手風琴。我一直無法找到一個這樣的例子。 –

您可以使用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>

來源

2017-03-16 19:50:47 LGSon

這裏的（使用jQuery幾行添加collapse值的屏幕480像素上觀看時，來引導的data-toggle屬性的示例或任何你想要的寬度）或更小。

$(function(){ 
    if($(window).width() <= 480) { 
     $("#col1, #col2").attr("data-toggle", "collapse"); 
    } 
    })

注意：你必須刷新頁面，如果你只是調整您的瀏覽器（並確保你調整小提琴結果窗口小於480像素，看看效果），但它仍然會使您的列可以在移動設備上進行手風琴演示，而在大屏幕上正常顯示。

Fiddle

來源

2017-03-16 20:15:00 Mark

@William Hodge你能工作嗎？ – Mark

對不起它採取這麼久纔回到你身邊。所有建議的代碼都很棒。我最終做的是隱藏了手風琴，並以手機的尺寸顯示，然後隱藏了主要內容。剛用過css。

來源

2017-03-18 23:42:20

當調整大小時，使3列變爲手風琴

回答

相關問題