css 網格 - 在媒體查詢中隱藏行
[英]css grid - hide row in media query
問題描述
我正在使用 css 網格來制作我的布局。 我想隱藏我的詳細信息行，只在媒體查詢中顯示側邊欄行（最大 576 像素）。 當我想查看詳細信息行時，我應該單擊“顯示詳細信息”按鈕並隱藏側邊欄行。 我嘗試了不同的方法，但我無法解決。
我真的很感激任何幫助。
* { margin: 0; padding: 0; }.container { margin: 0; height: 100%; display: grid; grid-template-columns: 100%; grid-template-rows: 40px 1fr; grid-column-gap: 0; }.header { background-color: #ececec; }.main { background-color: yellow; display: grid; grid-template-columns: 40px 1fr; }.apps { background-color: lightgrey; }.content { background-color: blue; display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; }.content-header { background-color: red; /* display: flex; */ }.content-body { background-color: antiquewhite; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 1fr; }.sidebar-panel { background-color: aquamarine; }.sidebar-button, .detail-panel-button { display: none; }.details-panel { background-color: cyan; } @media screen and (max-width:576px) {.main { grid-template-columns: 100%; grid-template-rows: 1fr 40px; }.content { order: 1; }.apps { order: 2 }.content-body { grid-template-columns: 1fr; grid-template-rows: 1fr; }.sidebar-panel { display: block; }.details-panel { display: none; }.sidebar-button, .detail-panel-button { display: block; } } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } <div class="container"> <div class="header"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, expedita. </div> <div class="main"> <div class="apps"> App1 <br> App2 </div> <div class="content"> <div class="content-header"> <div style="height: 40px;"> Ribbon </div> </div> <div class="content-body"> <div class="sidebar-panel"> <h3>Sidebar</h3> <button class="sidebar-button">Show Detail</button> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam reprehenderit suscipit molestias minus velit earum sed quasi tenetur sit voluptate. </div> <div class="detail-panel"> <h3>Detail</h3> <button class="detail-panel-button">Show Sidebar</button> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ex nam, laudantium cumque voluptas aliquid harum esse veniam deserunt numquam. Odit tenetur sunt, harum laborum voluptatibus pariatur. Ad, nemo ipsa iure recusandae dignissimos iusto odio libero sapiente neque, Tenetur et quam magnam, numquam assumenda a aut. Dignissimos, sit, Impedit modi necessitatibus alias voluptatum odio ipsum enim quam eum, harum animi quidem, itaque </div> </div> </div> </div> </div>1 個解決方案
解決方案1
-1 2020-07-24 06:47:06
該死的兄弟你犯了一個小小的錯誤。 只需將.details-panel修改為.detail-panel即可。 請將此<meta name="viewport" content="width=device-width, initial-scale=1">粘貼到您的<head>標記中
無法使用媒體查詢將 1/6 css 網格調整為 2 /2 css 網格
[英]Unable to resize 1/6 css grid into 2 /2 css grid with media query
如何正確隱藏或顯示頁面元素（使用純CSS的媒體查詢）？
[英]How to hide or show correctly page element (with media query of pure css)?
如何使用媒體查詢在手機上將 3 列 CSS 網格更改為 1 列
[英]How to make 3 column CSS grid change into 1 column on mobiles with media query
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.