Question

在网站设计方面，我是初学者。如何摆脱我的jumbotron导航栏和页脚之间的空白？在jumbotron和后面的Navbar之间有空格，以及之后的下一个页脚。随附的是以下jsfiddle＆gt; https://jsfiddle.net/5c6kx9tu/1/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="mj.css">
  <title>Michael Jordan Tribute Page</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="jumbotron">
    </div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About MJ</a></li>
  <li><a href="#">Accomplishments</a></li>
  <li><a href="#">Statistics</a></li>
  <li><a href="#">Quotes</a></li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
  <p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>

</body>

这是css

.jumbotron{
  height: 350px;
  width: 100%;
  background-size: 100% 100%;
  background-image:url(mj.jpg);
  margin-bottom: 0px;
}

.footer{
  margin: 0px;
  background-color: grey;
  bottom: 0px;
  padding: 20px;
}

.text-center{
  font-size: 20px;
  font-style: italic;
  font-family: "Gill Sans", sans-serif;
}

Answer 1

我强烈建议不要修改核心引导样式，而是使用一些辅助类。

如果您正在使用Bootstrap 3（您在代码中加载），那么您需要编写一些辅助类，就像我在这个小提琴中所做的那样，以及下面的内容：

CSS助手类（你可以添加其他 - mt（对于margin top），5em（对于.5 em）等：

/* helper class, modeled after Bootstrap 4 helper classes */
.mb-0 {
  margin-bottom: 0 !important;
}

然后只需将这些类添加到您的标记中，如下所示：

<body>
    <div class="jumbotron mb-0">
    </div>
    <nav class="navbar navbar-default mb-0">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About MJ</a></li>
          <li><a href="#">Accomplishments</a></li>
          <li><a href="#">Statistics</a></li>
          <li><a href="#">Quotes</a></li>
        </ul>
      </div>
    </nav>
    <footer class="footer container-fluid text-center">
      <p>"Website created using Bootstrap 4 by Andrew"</p>
    </footer>
  </body>

工作示例/小提琴：https://jsfiddle.net/cale_b/0gn7w3Lk/1/

如果你正在使用Bootstrap 4，那些辅助类已经存在，你可以使用它们：https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 2

如果你添加

.navbar {
margin: 0;
}

那应该清除它。玩弄它。确保在包含引导样式表之后的某处添加它，因此它会覆盖引导程序css。

Answer 3

要删除jumbotron和navbar之间的空格，您需要做的就是在引导程序样式表下面调用样式表。然后，在样式表中，您需要以下行来删除导航栏和页脚之间的空格：

.navbar {
    margin-bottom: 0px;
}

Answer 4

在我看来，最好不要改变引导程序自己的类，改为拥有自己的类或id。

还要记住要添加css的位置，最好在bootstrap之后添加css，否则可以更改bootstrap逻辑。这意味着您可以生成不需要的行为。

这里只是添加ID＆＃39; s https://jsfiddle.net/5c6kx9tu/5/

的示例

#myJumbotron{
  margin-bottom:0px;
  background-color: red;//this color it's just to see the problem clear
}

#myNavbar{
  background-color: green;//this color it's just to see the problem clear
  margin-top: 0px;
}

在我看来，最好的解决方案是在引导程序后包含另一个文件，并为要更改的元素创建自己的类。

如何摆脱不同引导类/元素之间的空白？

4 个答案: