小屏幕上的引导 h1 上边距
Posted
技术标签:
【中文标题】小屏幕上的引导 h1 上边距【英文标题】：Bootstrap h1 top-margin on small screens 【发布时间】：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。 【参考方案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 h1margin:0;
@media(min-width:768px)
.removeh1margin h1margin:0;
@media(min-width:992px)
.removeh1margin h1margin:0;
@media(min-width:1200px)
.removeh1margin h1margin: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>【讨论】：
以上是关于小屏幕上的引导 h1 上边距的主要内容，如果未能解决你的问题，请参考以下文章
从 Android TV 中的 BrowseFragment 中删除上边距