HTML: Bootstrap 导航栏有我无法识别的完整跨度下划线？

Question

我正在使用 bootstrap cdn 创建练习导航栏。一切都很简单，除了默认情况下有一条我希望删除或自定义的下划线，但我没有把它放在那里，所以我不确定如何在我的 css 选择器中识别它。

使用 chrome 开发工具，我发现了一个项目 display: table，当我禁用它时，栏会跳到选项卡上方。但是 table 可能与选项卡后面的内容有关，而不是实际行本身。

我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mockup NavBar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
    body {
        background-color: gray;
    }
    #home {
        padding: 11px;
        background-color: #64a3dd;
        color: white;
        border-radius: 3px;
    }
    .divider {
        width: 80%;
    }

    a {
        color: #ffffff;
    }
    .dropdown {
        margin-right: 1px;
        margin-left: 1px;
        border-radius: 3px;
        background-color: #64a3dd;
    }
</style>
</head>
<body>
<div class="menu-mockup" style="center">
    <ul class="nav nav-tabs">
        <li class="active">
            <div id="home">
            <a href="#"><i class="fa fa-home"></i></a>
            </div>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Community</a>        
                <ul class="dropdown-menu">
                    <li><a href="#">Recent Activity</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Member Forum</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Member List</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Member Groups</a></li>
                </ul>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pet Help</a>     
                <ul class="dropdown-menu">
                    <li><a href="#">Pets for Dummies</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Expected Costs</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Breeds</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Pet Quiz</a></li>
                </ul>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pets for Sale</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Buying Guide</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Search by Location</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Search by Species</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Pet Accessories</a></li>
                </ul>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pet Services</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Veterinarians</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Grooming</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Training</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Pet Clubs</a></li>
                </ul>
            </li>
        </ul>   
</div>
</body>
</html>

Answer 1

您只需将此添加到您的 CSS:

.menu-mockup .nav-tabs {
  border-bottom: 0;
}

工作代码片段：

body {
  background-color: gray;
}
#home {
  padding: 11px;
  background-color: #64a3dd;
  color: white;
  border-radius: 3px;
}
.divider {
  width: 80%;
}
a {
  color: #ffffff;
}
.dropdown {
  margin-right: 1px;
  margin-left: 1px;
  border-radius: 3px;
  background-color: #64a3dd;
}
.menu-mockup .nav-tabs {
  border-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<body>
  <div class="menu-mockup" style="center">
    <ul class="nav nav-tabs">
      <li class="active">
        <div id="home">
          <a href="#"><i class="fa fa-home"></i></a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Community</a> 
        <ul class="dropdown-menu">
          <li><a href="#">Recent Activity</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Member Forum</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Member List</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Member Groups</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pet Help</a> 
        <ul class="dropdown-menu">
          <li><a href="#">Pets for Dummies</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Expected Costs</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Breeds</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Pet Quiz</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pets for Sale</a>
        <ul class="dropdown-menu">
          <li><a href="#">Buying Guide</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Search by Location</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Search by Species</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Pet Accessories</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pet Services</a>
        <ul class="dropdown-menu">
          <li><a href="#">Veterinarians</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Grooming</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Training</a>
          </li>
          <li class="divider"></li>
          <li><a href="#">Pet Clubs</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

Answer 2

您必须添加另一个 css 规则。影响该行的属性是 "nav tabs"，它位于 bootstrap.min.css 文件中。

HTML: Bootstrap 导航栏有我无法识别的完整跨度下划线？

HTML: Bootstrap Navbar has full spanning underline that I can't identify?

html

css

cdn

twitter-bootstrap

HTML: Bootstrap 导航栏有我无法识别的完整跨度下划​​线？

HTML: Bootstrap Navbar has full spanning underline that I can't identify?

html

css

cdn

twitter-bootstrap

HTML: Bootstrap 导航栏有我无法识别的完整跨度下划线？