Question

我正在创建一个包含一个.html文件和一个.css文件的页面。

我已将bootstrap 4 CDN合并到我的html头中。

对于中等屏幕尺寸，网格显示正常，但在我在手机上查看时，它不会调整大小。

之前我使用过bootstrap 4在我的反应应用程序中没有问题但是相同的方法似乎不适用于普通的html和css。

我的代码可以在下面看到。

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Portfolio</title>
        <meta name="description" content="Showcasing my portfolio">
        <!-- Latest compiled and minified CSS (bootstrap) -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <nav>
            <div class="navLeft">
                <a href=".nameSection">NAME</a>
            </div>
            <div class="navRight">
                <a href="">PORTFOLIO</a>
                <a href="">ABOUT</a>
                <a href="">CONTACT</a>
                <a href="">CURRICULUM VITAE</a>
                <a href="">GITHUB PROFILE</a>
            </div>
        </nav>
        <div class="container">
            <div class="contentPane">
                <div class="nameSection">
                    <div class="row">
                        <div class="col-md-4 col-10 mx-auto">
                            <img src="" alt="NAME">
                            <h1>NAME</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-10 mx-auto">
                            <div class="underline" class="col-12 mx-auto"></div>
                            <h4>Front End Developer</h4>
                        </div>
                    </div>
                </div>
                <div class="portfolioSection">
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <h1>PORTFOLIO</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <div class="underline" class="col-12 mx-auto"></div>
                            <h4>Front End Developer</h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-10 mx-auto">
                            <img class="screen" id="kovScreen" src="" alt="King Of Vape Screenshot">
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="rgbyScreen" src="" alt="Simon Game Screenshot">
                            testcontent
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="osxsScreen" src="" alt="Naughts and Crosses Screenshot">
                            testcontent
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="pomodoroScreen" src="" alt="Pomodoro Clock Screenshot">
                            testcontent
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="calculatorScreen" src="" alt="Calculator Screenshot">
                            testcontent
                        </div>
                    </div>
                </div>
                <div class="aboutSection">
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <h1>PORTFOLIO</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <div class="underline" class="col-12 mx-auto"></div>
                            <h4>Front End Developer</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

我确实在某些行中有超过12列，但之前从未出现过问题，正如我之前所说，在中等屏幕尺寸上一切正常。

的CSS：

nav {
    position: fixed;
    top: 0px;
    z-index: 1;
    display: block;
    height: 50px;
    width: 100%;
    background-color: #A65900;
    padding-top: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}

nav a {
    text-decoration: none;
    color: white;
    padding: 0 0.5em;
    display: inline;
}

nav .navLeft {
    font-size: 20px;
    display: inline;
    margin-left: 5rem;
}

nav .navRight {
    display: inline;
    margin-right: 5rem;
}

.contentPane {
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}

.nameSection {
    width: 100%;
    text-align: center;
    background-color: #FFA200;
}

.nameSection img {
    margin-top: 90px;
    max-height: 200px;
    width: 100%;
}

.underline {
    display: block;
    clear: both;
    height: 8px;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 5px;
}

.nameSection h4 {
    margin-bottom: 40px;
}

.portfolioSection {
    text-align: center;
    background-color: #FFEF00;
}

.portfolioSection h1 {
    margin-top: 40px;
}

.screen {
    width: 100%;
    max-height: 200px;
}

有人能看出我做错了吗？

感谢所有帮助。感谢。

Answer 1

请参阅Bootstrap文档中的Responsive meta tag。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

您错过了meta viewport指令，因此移动浏览器会假设您没有设计自适应网站，而是默认为桌面设计进行缩放。

添加元元素。

Bootstrap 4网格用于计算机屏幕：调整浏览器大小调整大小。未调整手机屏幕大小（保持中等屏幕设置）

1 个答案: