Bootstrap 小屏幕上的 h1 上边距

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 class 不会被触发（它适用于 "medium" 分辨率）所以 float: left 和 width: 100% 样式不会应用导致您观察到的差距。

要解决此问题，您可以使用 col-xs-12 classes 代替：

<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

Answer 2

希望对你有帮助you.you可以使用媒体查询

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  
    <script src="script.js"></script>
    <style>
       @media(max-width:767px){
       .removeh1margin h1{margin:0;}
    }
    @media(min-width:768px){
   .removeh1margin h1{margin:0;}
}
    @media(min-width:992px){
   .removeh1margin h1{margin:0;}
}
    @media(min-width:1200px){
  .removeh1margin h1{margin:0;}
}

    </style>
   
  </head>

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

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

</html>

Bootstrap 小屏幕上的 h1 上边距

Bootstrap h1 top-margin on small screens

html

css

twitter-bootstrap

margin

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