【发布时间】：2018-06-18 15:03:59
【问题描述】：
好的，我想做的是在活动选项卡下创建一个好看的下划线，但我似乎无法足够具体地标记类，当然我使用的是引导程序，我想使用 HR，因为我不知道如何更改文本装饰的宽度和边距或识别元素，例如边框底部。
HTML 代码
<!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>
CSS 代码
/* 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;
}
a.nav-link.active {
font-size:100px;
}
如你所见，我已经尝试过测试a.nav-link.active，但还是不行
【问题讨论】：
-
你的 div 类 container-fluid 需要一个右括号
-
“我不知道如何更改文本装饰的宽度和边距或识别边框底部等元素” - 你问如何实现边框底部？
标签： html css twitter-bootstrap