Question

好的，我想要做的是在活动标签下创建一个好看的下划线，但我似乎无法专门标记该类，当然我使用bootstrap，我想使用HR因为我不知道如何更改文本修饰的宽度和边距或标识边框底部等元素。

HTML CODE

Ok

CSS代码

   <!DOCTYPE html>
<html>
<head>
  <title>Test Site</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="blogStyle.css">
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid"
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Test</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right nav-pills">
        <li><a class="nav-link active" href="#">Blog</a>
        </li>

        <li><a href="#">Shop</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact Me</a></li>
    </div>
  </div>
</nav>



  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
  crossorigin="anonymous"></script>
</body>
</html>

正如您所看到的，我已经尝试过测试a.nav-link.active，但仍然无法正常工作

Answer 1

用这个CSS替换你的CSS。

.navbar-default .navbar-nav>li>a {
    color: #777;
    border-bottom: 1px solid transparent;
    border-radius: 0px;
}
.navbar-default .navbar-nav>li>a:hover {
    border-bottom: 1px solid #333;
    transition: 0.3s;
}
.navbar-default .navbar-nav>li>a.nav-link.active {
    border-bottom: 1px solid #333;
}

Answer 2

您可以使用开发人员工具查看哪个CSS选择器覆盖了a.nav-link.active选择器。

在这种情况下是这样的：

.navbar-default .navbar-nav > li > a

您的选择器足够具体如果您将其更改为：

.navbar-default .navbar-nav > li > a.nav-link.active

然后您可以为底部边框添加样式。

Answer 3

检查ul

的结束标记

您可以将.navbar-default .navbar-nav>li>a.active用于活动菜单

/* navbar */

.navbar-default {
  background-color: #a300cc;
  border-color: #E7E7E7;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
  border-top: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  height: 60px;
}


/* Title */

.navbar-default .navbar-brand {
  color: white;
  font-size: 24px;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: white;
}

.navbar-default .navbar-nav>li>a .nav-link .active {
  font-size: 10px;
}

a.nav-link.active {
  font-size: 100px;
}


/* Link */

.navbar-default .navbar-nav>li>a {
  color: white;
  font-size: 19px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: white;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: white;
  background-color: #a300cc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  color: white;
  background-color: #D5D5D5;
}


/* Caret */

.navbar-default .navbar-nav>.dropdown>a .caret {
  border-top-color: #777;
  border-bottom-color: #777;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.navbar-default .navbar-nav>li>a.active {
  border-bottom: 1px solid red;
  border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Test</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right nav-pills">
        <li><a class="nav-link active" href="#">Blog</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </div>

  </div>
</nav>

似乎无法正确识别CSS / Bootstrap

3 个答案: