gpt4 book ai didi

javascript - 列未针对移动 View 正确调整大小

转载 作者:太空宇宙 更新时间:2023-11-03 22:17:55 26 4
gpt4 key购买 nike

当我为移动 View 调整窗口大小时(宽度低于 550 像素),我希望列根据窗口大小拉伸(stretch)宽度。相反,蓝色列略小于视口(viewport)宽度,而黄色、红色和绿色列收缩得太多。

这是我得到的结果: 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>

最佳答案

删除 col-1 类,根据 Bootstrap 4+ col-* 用于在小型设备中设置宽度 source

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>

关于javascript - 列未针对移动 View 正确调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55471801/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com