所以我正在尝试学习如何使用 Bootstrap 并且我已经掌握了它的窍门，但我找不到答案的一件事是为什么这个空白出现在我的屏幕顶部，但只有当调整大小低于某个阈值(我没有确切的像素数，但似乎约为 992px)？
我使用的是 bootstrap.min.css，然后是我自己的自定义 style.css。这是我在这里提出的第一个问题，因此我将尝试正确设置格式以显示我的 html，但更重要的是，这是一张显示我正在谈论的内容的图片。
I'm including this because I was unable to find an answer online... so usually this means it is just an extremely simple answer with a difficult way of asking!
This is the Whitespace I'm talking about
这是我的 HTML，以防您需要更好地查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="css/kylestyle.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 kb-header">
<h1 class="kb-head-text">A Design Website</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
<div class="col-xs-6 col-md-3 kb-img"><img class="img-responsive" src="http://placehold.it/600x600" alt=""></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
和我的自定义 .css
.kb-header {
height: 800px;
background-color: #FF3300;
color: white;
}
.kb-head-text {
color: white;
font-size: 6em;
text-align: center;
}
.kb-img {
padding-top: 2em;
}
谢谢!我对此很陌生，所以我希望我能够为有人帮助我提供足够的信息!
最佳答案
检查后... .container-fluid类将转到页面顶部，以及第一个 .row类(class)。然而，<div class="col-md-12 kb-header">没有...我所要做的就是把我的.kb-header在 .row分区
<div class="row kb-header">
<div class="col-md-12">
<h1 class="kb-head-text">A Design Website</h1>
</div>
</div>`
问题已解决!
关于html - 为什么折叠浏览器时顶部会出现这个空白？ [ Bootstrap 3]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24868136/