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

时间：2019-04-02 09:52:33

标签： 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 个答案:

答案 0 :(得分：1)

这似乎是由col-1引起的，这意味着列的默认大小为1/12。您可以通过将col-1更改为col以获得默认宽度（最小断点）的12/12（100％）宽度来实现所需的宽度，从而解决尺寸问题。不过，您可能必须设置一个高度。

Codepen：https://codepen.io/jesprj/pen/xeGgpG

答案 1 :(得分：1)

尝试向每个容器添加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/

答案 2 :(得分：1)

根据Bootstrap 4+，删除col-1类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>

答案 3 :(得分：0)

只需将媒体查询中的.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%;
    }
}
相关问题
最新问题