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

【问题标题】：Styling links to look the same as buttons I created in Bootstrap 3样式链接看起来与我在 Bootstrap 3 中创建的按钮相同
【发布时间】：2014-07-17 19:41:49
【问题描述】：

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

【问题讨论】：

请创建一个小提琴之类的......

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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://www.bootply.com/GKCf6Vqzki

【讨论】：

谢谢，这解决了我的问题。也验证OK。看来我想多了。