列没有为移动视图正确调整大小答案

【问题标题】：columns not resizing properly for mobile view列没有为移动视图正确调整大小
【发布时间】：2019-04-10 03:39:16
【问题描述】：

当我调整移动视图的窗口大小（宽度低于 550 像素）时，我希望列根据窗口大小拉伸宽度。相反，蓝色列略小于视口宽度，而黄色、红色和绿色列缩小得太多。

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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

去掉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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需将媒体查询中 .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%;
    }
}

【讨论】：