Question

我使用按钮（btn-group）在Bootstrap 3中为我的网站创建了一个很好的导航窗格，因为我喜欢它们的外观。问题是我发现你不能在按钮周围包装链接，因为它不是有效的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

的更多信息

编辑：

这是一个小提琴： http://www.bootply.com/GKCf6Vqzki

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

1 个答案: