html - 样式链接看起来与我在 Bootstrap 3 中创建的按钮相同

Question

我使用按钮 (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);
 }

Answer 1

您应该将按钮的 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