调整视口大小时引导程序出现意外行为答案

【问题标题】：Unexpected behavior with boostrap when resizing viewport调整视口大小时引导程序出现意外行为
【发布时间】：2016-07-11 22:28:26
【问题描述】：

复制步骤
1. 将浏览器窗口扩展到全屏（在笔记本上执行）。
2. 不断调整窗口大小。

预期行为：
调整浏览器窗口大小会调整 DIV 元素的大小。

实际行为：
DIV 元素似乎没有完全调整大小，如显示的背景颜色（橙色）所示。

参考资料：
Screenshot
JSFiddle

外部资源：
bootstrap.min.js
bootstrap.min.css
引导主题.min.css
jquery-2.2.4.min.js

HTML

<body>

  <div class="container-fluid" id="top">

    <div class="row">
      <div class="col-md-12" id="intro-row">
        <h2 id="intro-content">Lorem ipsum Dolore sunt cillum laboris in veniam.</h2>
      </div>
    </div>

    <div class="footer-row">
      <a href="#top">Lorem ipsum Laboris ex Duis cillum incididunt aliqua.</a>
    </div>

  </div>

</body>

CSS

body {
    font-family: 'Roboto Mono', sans-serif;
    color: black;
    font-weight: 300;
    width: 100%;
    height: auto;
    background-color: orange;
}

#header-row {
    background-color: green;
}
.header-content {
    margin: 30px 30px 30px 15px;
    font-size: 2em;
}

#intro-row {
    background-color: blue;
}
#intro-content {
    margin: 100px 150px 100px 150px;
    font-size: 12em;
    text-align: left;
}

.footer-row {
    font-size: 18px;
    text-align: center;
    background-color: orange;
    color: white;
}

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

给你的#intro-row下面的css：

#intro-row {
    background-color: blue;
    float: left;
    width: 100%;
}

似乎 bootstrap 正在删除 float left 属性，如果视口超过 992 像素，它就可以工作。

编辑

或者，您可以在 HTML 中的引导类之后提供介绍行 ID：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="intro-row">

【讨论】：

【解决方案2】：

解决此问题的另一种方法是更改 #intro-content 中的边距，并改为在文本的顶部和底部使用填充。

#intro-content {
    margin: 0 150px 0 150px;
    padding: 20px 0 20px 0;
    font-size: 3em;
    text-align: left;
}

jsFiddle

编辑：小提琴

【讨论】：

【解决方案3】：

最简单的方法：

/* Remove this: */
#intro-row {
    background-color: blue;
}

/* Add this: */
#top > .row {
    background-color: blue;
}

【讨论】：