Question

很难用这个CSS代码......遗憾的是，我无法弄清楚为什么我在导航栏的底部保留了一个白色的行。非常感谢任何帮助。

我使用了Inspector工具来隔离空间所属的元素，但是我没有边框，填充，也没有与之关联的边距。

＆＃13;

#myNavigation,
.collapse {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  background-color: #2e3391;
}

#menu {
  margin: 0 10%;
  border: 0;
  padding: 0;
  text-align: center;
}

#menu li a {
  text-align: center;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-decoration: none;
  padding: 10px;
  background-color: #666;
  color: #a4c1eb;
  border-bottom: 1px;
  border-bottom-color: #000;
  border-bottom-style: solid;
}

#menu li a:hover {
  background-color: #a4c1eb;
  color: #2e3391;
  padding-bottom: 12px;
  border-bottom: 5px;
  border-bottom-color: #f4f4f4;
  border-bottom-style: solid;
  margin: -1px;
}

＆＃13;

<body>
  <div id="myNavigation">
    <nav id="menu" class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-ex1-collapse">
    				<span class="sr-only">Toggle navigation</span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
        <!-- <a class="navbar-brand" href="#"></a> -->
      </div>

      <!-- Collect the nav links, forms, and other content for 
    toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id="menu-nav" class="nav navbar-nav">
          <li class="active"><a href="#home-slider">Home</a></li>
          <li><a href="#about">About </a></li>
          <li><a href="#join">How To </a></li>
          <li><a href="#support">Support</a></li>
          <li><a href="#media">News &amp; Media</a></li>
          <li><a href="#events">Schedules &amp; Events</a></li>
          <li><a href="#alumni">The Corner</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </nav>
  </div>
</body>

</html>

＆＃13;

Answer 1

Bootstrap在min-height级上的.navbar为50px。由于你的导航是41px，下方会显示一个额外的空格，https://jsfiddle.net/smhtp5c8/1/

只需使用

更新您的CSS

#menu {
    ...
    min-height: 0;
}

Answer 2

@ user8379561要么必须覆盖.navbar css，要么也可以像上面那样使用css特异性。

需要帮助删除导航栏上的空白区域

2 个答案: