Html 为什么在折叠我的浏览器时，此空白显示在顶部？[引导程序3]_Html_Css_Twitter Bootstrap 3_Whitespace_Removing Whitespace

Html 为什么在折叠我的浏览器时，此空白显示在顶部？[引导程序3]

html css twitter-bootstrap-3

Html 为什么在折叠我的浏览器时，此空白显示在顶部？[引导程序3],html,css,twitter-bootstrap-3,whitespace,removing-whitespace,Html,Css,Twitter Bootstrap 3,Whitespace,Removing Whitespace,因此，我正在尝试学习如何使用引导，我已经掌握了它的窍门，但有一件事我找不到答案，那就是为什么这个空白会出现在我的屏幕顶部，但只有当大小调整到某个阈值以下时才会出现（我没有确切的像素计数，但它似乎约为992px）我正在使用bootstrap.min.css，然后在它下面使用我自己的custom style.css。这是我在这里的第一个问题，所以我将尝试获得正确的格式来显示我的html，但更重要的是，这里有一张图片显示了我正在谈论的内容我之所以包括这个，是因为我无法在网上找到答案。。。因此，通常

因此，我正在尝试学习如何使用引导，我已经掌握了它的窍门，但有一件事我找不到答案，那就是为什么这个空白会出现在我的屏幕顶部，但只有当大小调整到某个阈值以下时才会出现（我没有确切的像素计数，但它似乎约为992px）

我正在使用bootstrap.min.css，然后在它下面使用我自己的custom style.css。这是我在这里的第一个问题，所以我将尝试获得正确的格式来显示我的html，但更重要的是，这里有一张图片显示了我正在谈论的内容

我之所以包括这个，是因为我无法在网上找到答案。。。因此，通常这意味着这只是一个极其简单的答案，问起来很难

这是我的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>

谢谢大家!！我是个新手，所以我希望我能提供足够的信息给别人帮助我

检查后。。。

.container fluid

类以及第一个

.row

类将位于页面顶部。但是，

没有。。。我所要做的就是把

.kb头

放在

行

div中

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


设计网站
`

问题解决了

如果我没记错的话，引导会在调整容器大小时向容器类添加填充。您是否尝试过检查它？您是否尝试过在它上使用dom检查器？e、 g.右键单击空白，“检查”？任何称职的检查员都会直接将您带到空白所属的元素。除了firebug，还有其他选项吗？我试着在Firebug中使用它，但有人告诉我它在本地文件上不起作用

kylestyle.css中还有什么？在Bootply上看起来不错：试试纯铬<代码>右键单击

检查

您是否可以接受自己的答案，因此它会从“未回答”部分中删除？

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