Bootstrap 4 如何使网站在手机屏幕上响应_Bootstrap 4

Bootstrap 4 如何使网站在手机屏幕上响应

bootstrap-4

Bootstrap 4 如何使网站在手机屏幕上响应,bootstrap-4,Bootstrap 4,我正在进行一个引导项目，在我的项目中，我试图使我的网站响应手机屏幕也是如此，但在手机屏幕上，响应性并不强。我做了很多网站作为回应。所以请帮助我实现这一目标这是Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

我正在进行一个引导项目，在我的项目中，我试图使我的网站响应

手机屏幕也是如此，但在手机屏幕上，响应性并不强。我做了很多网站

作为回应。所以请帮助我实现这一目标

这是Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="main.css">

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12 bg-danger">
              <div>
                    <ol>
             <li class="heading-li">Managing cookies
                            <p class="mt-2 paragraph">9.1. Most browsers allow you to refuse to accept cookies and to
                                delete
                                cookies. The
                                methods for doing
                                so vary from browser to browser, and from version to version. You can however obtain
                                up-to-date
                                information about blocking and deleting cookies via these links:
                                (i) https://support.google.com/chrome/answer/95647?hl=en (Chrome);
                                (ii)https://support.mozilla.org/en-US/kb/enable-and-disable-cookies-website-preferences
                                (Firefox);
                                (iii) http://www.opera.com/help/tutorials/security/cookies/ (Opera);
                                (iv)https://support.microsoft.com/en-gb/help/17442/windows-internet-explorer-delete-manage-cookies
                                (Internet Explorer);
                                (v) https://support.apple.com/kb/PH21411 (Safari); and
                                (vi)https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy (Edge).
                                9.2. Blocking all cookies will have a negative impact upon the usability of many
                                websites.
                                9.3. If you block cookies, you will not be able to use all the features on our website.
                            </p>
                        </li>
</ol>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

我检查了你代码的输出。它反应灵敏

我建议你读一下这个概念。你似乎不知道“响应”这个词是什么意思

简单地说，这意味着在任何屏幕宽度下观看时都没有水平滚动条，主要是笔记本电脑、平板电脑和手机，以及越来越大和越来越小的屏幕

有关视觉和概念解释，请参见：

使用

@media（）

查询根据浏览器视口的属性添加CSS规则。这是否回答了您的问题？为什么在某些元素中有一类“移动”元素？这不是一个引导类…嗨@Shadi Namrouti，但当我检查手机屏幕上的输出时，为什么红色不适用于所有手机屏幕？您在哪个手机浏览器上进行了测试，得出结论认为它不适合您？@Clone--Bootstrap bg danger表示红色背景。请在评论之前查阅引导定义。

.heading-li {
    font-size: 16px;
    font-weight: 600;
}

.paragraph {
    font-size: 16px;
    font-weight: 400 !important;
    font-family: 'Open Sans', sans-serif;
}