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>

但是在较小的屏幕上＆lt; 1280px，我得到黄色部分，这是h1标签的边缘，我不想要。

结果可以在这里看到：

enter image description here

如何删除黄色部分（较小屏幕上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

Answer 2

希望它能为您提供帮助。您可以使用媒体查询

<!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在小屏幕上的上边距

2 个答案:

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