列無法正確調整大小以進行移動視圖
[英]columns not resizing properly for mobile view
問題描述
當我調整移動視圖的窗口大小（寬度小於550px）時，我希望各列根據窗口大小來擴展寬度。 相反，藍色列比視口寬度略小，而黃色，紅色和綠色列縮小得太多。
這是我得到的結果： https : //imgur.com/Hl60iiy
這是我想要的結果： https : //imgur.com/cksNN7B
body{ margin:0; padding: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } p{ font-size: 10px; } .inBody{ height: 100vh; width: 100vw; display: flex; flex-direction: row-reverse; } .forAll{ height: inherit; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0; } .verticalOption{ transform: rotate(270deg); white-space: nowrap; display: flex; align-items:center; } .verticalOption a{ text-decoration: none; color: white; font-size: 20px; width: 200px; line-height: 5px; } .content{ display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .opened{ display: none; } .close{ display: none; } @media (max-width: 550px){ .inBody{ height: 100vh; width: 100%; flex-direction: column-reverse; } .verticalOption { transform: rotate(0); } .forAll{ height: 100vh; width: 100%; } }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="no-gutters"> <div class="fluid-container inBody"> <div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary"> <h2 class="verticalOption opened" id="menuHome"><a href="#" id="home">Sample</a></h2> <div class="container content allContent" id="homeContent"> <h1>HOME</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col-1 col2 forAll bg-warning"> <h2 class="verticalOption" id="menuAbout"><a href="#" id="about">Sample</a></h2> <div class="container content close allContent" id="aboutContent"> <h1>About</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col-1 col3 forAll bg-danger"> <h2 class="verticalOption" id="menuContact"><a href="#" id="contact">Contact Me</a></h2> <div class="container content allContent close" id="contactContent"> <h1>Sample</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm1 col-1 col4 forAll bg-success"> <h2 class="verticalOption" id="menuPortfolio"><a href="#" id="portfolio">Sample</a></h2> <div class="container content allContent close" id="portfolioContent"> <h1>Portfolio</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> </div> </div> </body> <script src="main.js"></script> </html>
4 個解決方案
解決方案1
1 2019-04-02 10:31:14
這似乎是由col-1引起的，這意味着列的默認大小為1/12。 您可以通過將col-1更改為col作為默認值（最小斷點）的12/12（100％）寬度來解決所需的寬度，從而解決尺寸問題。 您可能需要設置一個高度。
Codepen： https ：//codepen.io/jesprj/pen/xeGgpG
解決方案2
1 2019-04-02 10:35:17
嘗試將col-xs-12引導程序類添加到每個容器並刪除col-1
<div class="container col-xl-1 col-sm-1 col-xs-12 col2 forAll bg-warning">
繼承人js小提琴： https : //jsfiddle.net/bodybow/odtL97n1/1/
解決方案3
1 已采納 2019-04-02 10:43:13
刪除col-1類，根據Bootstrap 4+ col- *用於在小型設備源中設置寬度
body{ margin:0; padding: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } p{ font-size: 10px; } .inBody{ height: 100vh; width: 100vw; display: flex; flex-direction: row-reverse; } .forAll{ height: inherit; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0; } .verticalOption{ transform: rotate(270deg); white-space: nowrap; display: flex; align-items:center; } .verticalOption a{ text-decoration: none; color: white; font-size: 20px; width: 200px; line-height: 5px; } .content{ display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .opened{ display: none; } .close{ display: none; } @media (max-width: 550px){ .inBody{ height: 100vh; width: 100%; flex-direction: column-reverse; } .verticalOption { transform: rotate(0); } .forAll{ height: 100vh; width: 100%; } }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="no-gutters"> <div class="fluid-container inBody"> <div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary"> <h2 class="verticalOption opened" id="menuHome"><a href="#" id="home">Sample</a></h2> <div class="container content allContent" id="homeContent"> <h1>HOME</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col2 forAll bg-warning"> <h2 class="verticalOption" id="menuAbout"><a href="#" id="about">Sample</a></h2> <div class="container content close allContent" id="aboutContent"> <h1>About</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col3 forAll bg-danger"> <h2 class="verticalOption" id="menuContact"><a href="#" id="contact">Contact Me</a></h2> <div class="container content allContent close" id="contactContent"> <h1>Sample</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm1 col4 forAll bg-success"> <h2 class="verticalOption" id="menuPortfolio"><a href="#" id="portfolio">Sample</a></h2> <div class="container content allContent close" id="portfolioContent"> <h1>Portfolio</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> </div> </div> </body> <script src="main.js"></script> </html>
解決方案4
0 2019-04-02 10:33:06
只需將媒體查詢中的.forAll類的width：100％更改為max-width：100％
@media (max-width: 550px) {
.inBody {
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll {
height: 100vh;
max-width: 100%;
}
}
Angular2：touchStart和touchEnd在移動視圖中無法正確響應
[英]Angular2: touchStart and touchEnd are not responding properly in mobile view
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.