Bootply Example

Question

我是网站设计的新手，并尝试使用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部分重叠，如屏幕截图所示：

如何解决这个问题？

Answer 1

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

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

Answer 2

从height: 100%;样式中删除section。

Answer 3

这是你的大问题：你正在使用多个容器。我建议做的是只使用一个容器（并删除section标签），如下所示：

<body>
<div class="container">
        <div class="row">
            <div class="col-sm-12">
                    <h1>Section 1</h1>
            </div>
        </div>
        <div>
            <div class="row">
                <div class="col-sm-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 class="row">
            <div class="col-sm-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>

</body>

希望这有助于!!!

Answer 4

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

在移动设备

4 个答案:

Bootply Example

Bootply Example