Bootstrap：即使使用正确的类，布局也没有响应

Question

我认为我使用的是正确的 Bootstrap 结构，类，等等。那么为什么当我调整浏览器大小时布局变得完全混乱？我做错了什么？

body {
    font-family: 'Roboto', sans-serif;
}
h2 {
    font-size: 32px;
    font-weight: bold;
}
h3 {
    font-size: 16px;
    font-weight: bold;
}
.container {
    max-width: 1056px;
}
p {
    font-size: 14px;
}
nav.navbar {
    padding: 12px;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    background: none;
}
nav.navbar li {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
nav.navbar li a {
     padding: 8px 20px; 
     margin-top: 0.5em;
     border-radius: 4px;
}
nav.navbar li a:link {
    color: #9faeaf;
}
nav.navbar li a.active:link,
nav.navbar li a.active:visited {
    color: #fff;
}

Answer 1

在您的 html 代码中，您只使用了 col-sm-*。因此，浏览器将您的结构用于 .sm、.md 和 .lg classes，但不知道如何处理 .xs class（<768 像素）。因此，首先尝试定义 xs class。例如，对每个 div

使用该代码

<div class="col-xs-12 col-sm-4"> ... </div>

Answer 2

您的布局没有响应的主要原因是您在 CSS 中设置了明确的高度规则。以 section#about 为例——如果您删除在样式表中设置的显式 height: 980px;，Pixel Perfect 段落将不再与 正在寻找要使用的完美模板？标题。

其次，您对Bootstrap网格的使用不当。我注意到几乎每个部分都有 .container class。理想情况下，你应该删除那些并且只有 one .container class 封装整个页面（除非你想在一个页面上使用不同的容器大小）。

这是一个例子：

<body>
    <div class="container">
        <section id="intro" class="row">
            <div class="col-md-4">
            </div><!-- end .col-md-4 -->

            <div class="col-md-4">
            </div><!-- end .col-md-4 -->

            <div class="col-md-4">
            </div><!-- end .col-md-4 -->
        </section><!-- end #intro section -->

        <section id="about" class="row">
            <div class="col-md-6">
            </div><!-- end .col-md-6 -->

            <div class="col-md-6">
            </div><!-- end .col-md-6 -->
        </section><!-- end #about section -->
    </div><!-- end .container -->
</body>

Note: There is an exception with the Navbar/Footer, in which case you can put separate containers inside those elements as you already did with the Navbar.

第三，为页面上的每个垂直部分使用更多 .row classes 作为 "blocks"。您在您的部分中执行了此操作，但在从每个部分中删除容器后，通过为它们提供 .row class 使部分本身也成为单独的行可能是个好主意。

接下来，您不需要像kosmastsk建议的那样为每个屏幕尺寸定义规则。如果您喜欢只为 col-sm 定义断点的方式，那么这取决于您。不过，如果您开发 mobile first 并逐步升级到更大的屏幕尺寸，它会更好看。

如果您必须覆盖高度、宽度等，还可以考虑使用更多 CSS Media Queries 来帮助您更好地自定义您的网站

Bootstrap：即使使用正确的类，布局也没有响应

Bootstrap: Layout not responsive even while using correct classes

html

css

twitter-bootstrap

responsive

Bootstrap：即使使用正确的 类，布局也没有响应

Bootstrap: Layout not responsive even while using correct classes

html

css

twitter-bootstrap

responsive

Bootstrap：即使使用正确的类，布局也没有响应