如何使Bootstrap中的<button>看起来像nav-tabs中的普通链接？

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？

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>

Answer 2

只需使常规链接看起来像按钮:)

<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>

href代码中的"角色"使它看起来像按钮,你可以添加更多变量,如类.

Answer 3

在引导程序 3 中，这对我很有效：

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

像这样使用：

<button type="button" class="btn-link btn-anchor">My Button</button>

演示

Answer 4

只需将remove_button_css作为类添加到按钮标记即可.您可以验证链接1的代码

.remove_button_css { 
  outline: none;
  padding: 5px; 
  border: 0px; 
  box-sizing: none; 
  background-color: transparent; 
}

额外样式编辑

加入color: #337ab7;并:hover与:focus匹配开箱即用(bootstrap3)

.remove_button_css:focus,
.remove_button_css:hover {
    color: #23527c;
    text-decoration: underline;
}