我想在導航器中有一個大紅色的「捐贈」按鈕,裏面有白色文字,我的解決方案是<a href="#" class="btn btn-danger">Donate Now</a>
。但是,該按鈕似乎在懸停時變爲透明。如何在自舉導航欄中製作彩色按鈕?
我也試過<span class="label label-danger">Danger</span>
和<p class="btn btn-danger">Donate Now</p>
,但前者太小了,而後者在懸停上似乎很奇怪。
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/knowledge/index.css" rel="stylesheet">
</head>
<body>
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-danger">Donate Now</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
如果我的問題不能由上面的代碼複製,我也創造了這個fiddle。