简单保证金折叠问题

时间:2017-10-06 17:15:23

标签: html css twitter-bootstrap twitter-bootstrap-3 navbar

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

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

#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>

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

enter image description here

jsbin是:

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

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

2 个答案:

答案 0 :(得分:2)

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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;
&#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;
&#13;
&#13;