html - 小屏幕上的 Bootstrap h1 top-margin

Question

我在这段代码中使用 Bootstrap 3.3.2

<div class="container">
    <div class="row" style="background:red;">
        <div class="col-md-12">
            first container
        </div>
    </div>

    <div class="row" style="background:yellow;">
        <div class="col-md-12" style="background:blue;">
            <h1>seconds container with h1</h1>
        </div>
    </div>
</div>

但在较小的屏幕 <1280px 上，我得到黄色部分，它为 h1 标签留出边距，我不想要。

结果可以在这里看到:

如何去除黄色部分(小屏幕上 h1 之前的边距)？

Answer 1

问题是在小分辨率下 col-md-12 类不会被触发(它适用于“中等”分辨率)所以 float: left 和 width : 100% 样式未应用导致您观察到的差距。

要解决此问题，您可以改用 col-xs-12 类:

<div class="container">
    <div class="row" style="background:red;">
        <div class="col-xs-12">
            first container
        </div>
    </div>
    <div class="row" style="background:yellow;">
        <div class="col-xs-12" style="background:blue;">
            <h1>seconds container with h1</h1>
        </div>
    </div>
</div>

演示:http://plnkr.co/edit/jTwSD7Kx1T4hXwdJy0wF?p=preview