<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>-->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
私はこのコードのスニペットでトラブルを抱えています:
.navbar-default .navbar-nav > .active > a:after {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #1B94E1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
は基本的に、私は一種の下線を作成するために、CSS ::after
疑似クラスを使用します。しかし、何も起こっていないようです。私はブートストラップを使用しており、これらのスタイルをnavbarに適用していることに注意してください。ありがとう! http://codepen.io/Hudson_Taylor11/pen/ZBGGXQ
をcodepen動作していますか? コードスニペットを提供するとよいでしょう。私たちがあなたを助けるのを助けてください。 – seemly
ボーダーが表示されません。コードスニペットを提供します。ありがとう! –