小屏幕上的引导 h1 上边距答案

【问题标题】：Bootstrap h1 top-margin on small screens小屏幕上的引导 h1 上边距
【发布时间】：2015-03-31 16:11:55
【问题描述】：

我正在使用带有此代码的 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>

但是在

结果可以在这里看到：

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

【问题讨论】：

您知道您根本不需要为 col-12 的右侧创建行或定义列宽吗？你根本不需要定义它。它已经被暗示了。
能否请您提供您的问题的jsfiddle。

标签： html css twitter-bootstrap margin

【解决方案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

【讨论】：

谢谢。这确实是问题所在。

【解决方案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>

【讨论】：