gpt4 book ai didi

html - 为什么在折叠我的浏览器时这个空白出现在顶部? [ Bootstrap 3]

转载 作者:行者123 更新时间:2023-11-27 23:54:29 28 4
gpt4 key购买 nike

所以我正在尝试学习如何使用 Bootstrap 并且我已经掌握了它的窍门,但是我找不到答案的一件事是为什么这个空白出现在我的屏幕顶部,但只有当调整到某个阈值以下(我没有确切的像素数,但它似乎约为 992 像素)?

我正在使用 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 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com