Question

所以我试图学习如何使用Bootstrap并且我已经掌握了它，但有一点我找不到答案就是为什么这个空白出现在我的屏幕顶部，但只有当调整大小低于某个阈值时（我没有精确的像素数，但似乎大约是992px）？

我使用bootstrap.min.css，然后使用我自己的自定义style.css。这是我在这里的第一个问题，所以我会尝试将格式设置为显示我的HTML，但更重要的是，这是一张显示我正在谈论的内容的图片。

我包括这个，因为我无法在网上找到答案......所以通常这意味着这只是一个非常简单的答案，难以提问！

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;
}

谢谢！我对此非常陌生，所以我希望我能够为某人提供足够的信息来帮助我！

Answer 1

检查后...... .container-fluid课程将转到页面顶部，以及第一个.row课程。但是，<div class="col-md-12 kb-header">没有...我所要做的只是将.kb-header放入.row div

<div class="row kb-header">
  <div class="col-md-12">
    <h1 class="kb-head-text">A Design Website</h1>
  </div>
</div>`

问题解决了！

折叠浏览器时，为什么这个空格出现在顶部？ [Bootstrap 3]

1 个答案: