个人中心
gpt4 book ai didi

html - 在移动设备上重叠 Bootstrap 网格

转载 作者：行者123 更新时间：2023-11-28 07:19:03 25 4
gpt4 key购买 nike

我对网页设计相当陌生，并尝试使用 Bootstrap 网格系统创建响应式页面。这是我遇到问题的页面的简化版本:

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">

        body, html {
            width: 100%;
            height: 100%;
        }

        section {
            height: 100%;
            padding-top: 50px;
        }

    </style>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Section 1</h1>
                </div>
            </div>
            <div>
                <div class="row">
                    <div class="col-lg-12">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p>Ex suscipit laborum velit atque, eaque dolorum sequi, eligendi laudantium fuga quos dolorem officia sunt totam. Quidem aspernatur vero vitae laborum quaerat dolorum. Consequatur a tempora adipisci qui enim doloribus sequi voluptate, quidem itaque tenetur aut voluptas obcaecati adipisci architecto beatae aliquam? Nemo cumque sequi accusamus nesciunt obcaecati id blanditiis, neque laborum tenetur eveniet, rerum enim voluptatem voluptate itaque eos ut sint officiis molestiae?</p>
                        <p>Voluptate quis suscipit qui optio nulla unde veniam sed tempore itaque? Expedita optio amet, facere quia at consequatur reiciendis aperiam alias doloremque amet laudantium hic sunt, nulla voluptatem libero id veritatis molestiae ab in, totam dignissimos facere, accusantium voluptates mollitia quae iusto voluptas assumenda temporibus vel quod? Vero ipsa dolore impedit, animi laboriosam expedita similique impedit necessitatibus, repellat distinctio nobis amet voluptatem quae, expedita voluptas rerum?</p>
                        <p>Ratione aliquid deleniti maxime dicta, fugit incidunt quam omnis ad maiores, blanditiis modi repellat cumque ut nemo. Sapiente sequi sint, illum fugiat eum non deserunt totam doloremque officiis, alias fugiat asperiores doloremque laudantium numquam iste, tempore illum rem quidem.</p>
                        <p>Quam eum quia pariatur accusantium nesciunt, earum ducimus cupiditate doloribus voluptate fugiat reprehenderit esse obcaecati ex, corrupti dignissimos deserunt molestias tenetur minus, nam cum quaerat quidem, exercitationem iure ipsa vero neque quod iusto necessitatibus illo eos alias? Quae rem officiis accusantium ad expedita ratione modi tenetur reiciendis sint odio, eum animi voluptatem doloremque rem totam, sunt velit nobis blanditiis assumenda vel atque cupiditate nulla quo alias, sequi ullam nam deserunt eius labore nostrum hic tempore asperiores, dolorem repellendus expedita vel sit.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Section 2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Temporibus tempore dignissimos quaerat quo quisquam delectus commodi nesciunt sed.</p>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

这在桌面浏览器上看起来不错。但是，当我在移动设备浏览器(使用 Chromium 模拟 iPhone 5)上查看它时，第 2 部分似乎与第 1 部分重叠，如屏幕截图所示:

enter image description here

我怎样才能解决这个问题？

最佳答案

只需从 section CSS 中删除 height 属性即可。

Bootply Example

但是，正如@ChrisYongchu 所提到的，按照您当前格式化 HTML 的方式，您的代码不会有任何响应。在所有屏幕尺寸下，这些部分将简单地占据容器宽度的 100%。正确使用 Bootstrap 的一种方法是让内容在大屏幕尺寸上使用 2 列，然后在较小的屏幕尺寸上堆叠，标记如下所示:

<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h1>Section 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Ex suscipit laborum velit atque, eaque dolorum sequi, eligendi laudantium fuga quos dolorem officia sunt totam. Quidem aspernatur vero vitae laborum quaerat dolorum. Consequatur a tempora adipisci qui enim doloribus sequi voluptate, quidem itaque tenetur aut voluptas obcaecati adipisci architecto beatae aliquam? Nemo cumque sequi accusamus nesciunt obcaecati id blanditiis, neque laborum tenetur eveniet, rerum enim voluptatem voluptate itaque eos ut sint officiis molestiae?</p>
                <p>Voluptate quis suscipit qui optio nulla unde veniam sed tempore itaque? Expedita optio amet, facere quia at consequatur reiciendis aperiam alias doloremque amet laudantium hic sunt, nulla voluptatem libero id veritatis molestiae ab in, totam dignissimos facere, accusantium voluptates mollitia quae iusto voluptas assumenda temporibus vel quod? Vero ipsa dolore impedit, animi laboriosam expedita similique impedit necessitatibus, repellat distinctio nobis amet voluptatem quae, expedita voluptas rerum?</p>
                <p>Ratione aliquid deleniti maxime dicta, fugit incidunt quam omnis ad maiores, blanditiis modi repellat cumque ut nemo. Sapiente sequi sint, illum fugiat eum non deserunt totam doloremque officiis, alias fugiat asperiores doloremque laudantium numquam iste, tempore illum rem quidem.</p>
                <p>Quam eum quia pariatur accusantium nesciunt, earum ducimus cupiditate doloribus voluptate fugiat reprehenderit esse obcaecati ex, corrupti dignissimos deserunt molestias tenetur minus, nam cum quaerat quidem, exercitationem iure ipsa vero neque quod iusto necessitatibus illo eos alias? Quae rem officiis accusantium ad expedita ratione modi tenetur reiciendis sint odio, eum animi voluptatem doloremque rem totam, sunt velit nobis blanditiis assumenda vel atque cupiditate nulla quo alias, sequi ullam nam deserunt eius labore nostrum hic tempore asperiores, dolorem repellendus expedita vel sit.</p>
            </div>
            <div class="col-lg-6">
                <h1>Section 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Temporibus tempore dignissimos quaerat quo quisquam delectus commodi nesciunt sed.</p>
            </div>
        </div>
    </div>
</section>

请注意我是如何只定义 col-lg 大小的，如果您这样做，Bootstrap 将假定任何小于该大小的内容默认情况下都应使用完整的 12 列，因此这些部分将在移动设备上堆叠。我还删除了一个 section 元素和一个 container 元素，因为它们不是必需的。

Bootply Example

关于html - 在移动设备上重叠 Bootstrap 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32191997/

25 4 0
文章推荐： jquery - Fancybox 2.1.5 在 Safari 中无法正常工作
文章推荐： css - 具有左侧 float 侧选项卡的 Bootstrap 水平形式
文章推荐： javascript - 具有行详细信息的自适应网格
文章推荐： ios - 组合 TextView 中带有 onTapGesture 的多个 Bool
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com