gpt4 book ai didi

html - 如何在 Bootstrap 导航栏中制作彩色按钮?

转载 作者:太空宇宙 更新时间:2023-11-03 21:18:32 25 4
gpt4 key购买 nike

我想在 navber 中有一个带有白色文本的大红色“捐赠”按钮,我的解决方案是 <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 .

最佳答案

在您的自定义样式表上尝试此代码

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: red!important;
border: 1px solid red!important;
}

关于html - 如何在 Bootstrap 导航栏中制作彩色按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39697310/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com