我使用按钮 (btn-group) 在 Bootstrap 3 中为我的网站创建了一个漂亮的导航 Pane ,因为我喜欢它们的外观。问题是我发现您不能将链接环绕在按钮周围,因为它不是有效的 HTML5。我想将我的按钮更改为普通链接,但无法让它看起来一样。有人可以帮忙吗?
不正确的 HTML 但正确的样式:
<div class="btn-group">
<a href="index.html"><button type="button" class="btn btn-default active">Home</button></a>
<a href="services.html"><button type="button" class="btn btn-default">Services</button></a>
</div>
CSS:
.btn-group .btn {
border-color: #42C0FB;
border-width: 2px;
background-color: #42C0FB;
}
.btn-group .btn:hover, .btn-default.active {
background-color: white;
color: #42C0FB;
}
.btn-default.active {
-webkit-box-shadow: inset 0 5px 7px rgba(0, 0, 0, .400);
box-shadow: inset 0 5px 7px rgba(0, 0, 0, .400);
}
最佳答案
您应该将按钮的 css 应用到链接本身并删除按钮。 它应该看起来像这样:
<div class="btn-group">
<a href="index.html" class="btn btn-default active">Home</a>
<a href="services.html" class="btn btn-default">Services</a>
</div>
更多信息请访问 http://getbootstrap.com/css/#buttons
编辑:
这是一个 fiddle : http://www.bootply.com/GKCf6Vqzki
关于html - 样式链接看起来与我在 Bootstrap 3 中创建的按钮相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23914059/