如何使 Bootstrap 中的 <button> 看起来像导航选项卡中的普通链接？

Question

我在（以前的 Twitter）Bootstrap 2 工作，我想设计按钮的样式，就好像它们是普通链接一样。但是，不仅仅是任何普通链接；这些在 <ul class="nav nav-tabs nav-stacked"> 容器中。标记最终会像这样：

 <form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li><button type="submit" name="op" value="Link 1">Link 1</button></li>
        <li><button type="submit" name="op" value="Link 2">Link 2</button></li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Bootstrap 是否有办法使这些 <button> 看起来像它们实际上是 <a> s？

原文由 meustrus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如官方文档中所述，只需应用类 btn btn-link ：

 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

例如，使用您提供的代码：

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
        </li>
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
        </li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

原文由 SW4 发布，翻译遵循 CC BY-SA 4.0 许可协议