堆栈内存溢出
  繁体   English   中英

列无法正确调整大小以进行移动视图

[英]columns not resizing properly for mobile view

 原文  2019-04-02 09:52:32  1   4    javascript/ jquery/ html/ css/ css3

问题描述

当我调整移动视图的窗口大小（宽度小于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%;
    }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 2个相同高度的色谱柱尺寸不正确 我的移动响应网站没有正确调整大小 在浏览器中调整为移动视图大小时，图像会覆盖另一个div 为移动设备调整元素大小 div调整大小不正确 如何在移动视图中正确对齐 3 个相等的网格 - bootstrap Angular2：touchStart和touchEnd在移动视图中无法正确响应 ExtJs 4网格面板在调整窗口大小时无法正确调整大小 重新加载后调整列大小 在移动浏览器中滚动时调整背景大小
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM