Question

好的，我的背景主要是后端开发，这是因为我真的非常喜欢造型的东西。我把它留给我团队中的其他人。但是现在我有一个小利润率崩溃问题，我似乎并不理解。由于这个问题很容易复制，因此代码将在这里添加一个链接到该网站，作为我们的小提琴。

但问题是下一个：我有一个引导程序导航栏，我试图将其中一个项目的背景更改为黄色。就那么简单。问题在于，当我这样做时，我会在它之间得到一条小黑线（非常明显），同样，它下方也有一个巨大的空白区域。代码如下：

#yellow {
  background-color: #ffc424;
  margin-bottom: 0;
}

#redBar {
  background-color: red;
  margin-top: 0;
  height: 200px;
}

nav {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

我已尝试以不同的组合设置边距，但我似乎无法弄清楚如何在这些部分中阻止边距折叠：

jsbin是：

https://jsbin.com/mibeyozexo/edit?html,output

任何输入都很棒。欢呼声。

Answer 1

＆＃13;

#yellow {
  background-color: #ffc424;
  margin-bottom: 0;
}

#redBar {
  background-color: red;
  margin-top: 0;
  height: 200px;
}

nav {
  margin-bottom: 0;
  margin: 0;
  border: none;
}

nav.navbar {
  border: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid" style="">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

＆＃13;

Answer 2

您可以取消或删除Bootstrap Nav Bar的边框，如下所示：

.navbar {
  border-color: transparent;
  border: 0px;
  background-color: #99ccff; 
}

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

＆＃13;

*{
margin:0px;
padding:0px;

}

.navbar {
  border-color: transparent;
  border: 0px;
  background-color: #99ccff; 
}

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}




#yellow {
    	background-color: #ffc424;
        margin-bottom: 0px;
    }
    
    #redBar {
    	background-color: red;
        margin-top: 0;
        height:200px;
    }
    nav {
    	margin-bottom: 0;
    }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse" style="border-color: thistle;">
  <div class="container-fluid">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>

＆＃13;

简单保证金折叠问题

2 个答案: