Question

我正在尝试设置导航菜单及其相应内容的样式，我正在使用bootstrap。

根据评论编辑（感谢您指出）：

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>

  <body>
    <nav id="navigation" class="navbar navbar-inverse navbar-fixed-top" data-spy="affix">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Project name</a>
        </div>

        <div class="navbar-collapse collapse"></div>

        <div class="navbar-collapse collapse">
          <ul id="main-navigation" class="nav navbar-nav">
            <li class="item-1"><a href="#">MENU ENTRY 1</a></li>
          </ul>
        </div>
      </div>

      <div id="navigation-content" class="container-fluid">
        <div class="navigation-content-subsection" id="item-1">
          <div class="something"><p>content for MENU ENTRY 1 goes here.</p></div>
        </div>
      </div>
    </nav>
  </body>
</html>

相关的SCSS是：

$main-background: #e74c3c;
$menu-background: #ecf0f1;

body {
  background: $main-background;
}

#navigation-content {
  background: $menu-background;
}

如您所见，显示菜单条目的内容（它将在悬停事件时显示）。我遇到的问题是我想要内容和主导航的不同颜色，但我找不到隐藏底部黑线的方法。看起来navigation-content-subsection div没有占据整个高度，换句话说它不完全适合它的父div。

如何制作它以隐藏黑色底线？

Answer 1

navbar-fixed-top导致它。

.navbar-fixed-top {
  border-width: 0px;
}

我通过查看chrome dev工具（检查）找到了这个，直到我看到哪个元素有边框。

CSS更适合其父级中的子div

1 个答案: