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

我正在（以前称为Twitter）Bootstrap 2工作，我想button样式，就好像他们是正常的链接。 不仅仅是任何正常的链接， 这些都在<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> 

例如…用你提供的代码：

 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link href="http://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

只要定期的链接看起来像button:)

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

href代码中的“angular色”使得它看起来像button，ofc你可以添加更多的variables，如类。

Answer 3

只需将remove_button_css作为类添加到您的button标记。 您可以validation链接1的代码

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

额外样式编辑

添加color: #337ab7; 和:hover和:focus匹配OOTB（bootstrap3）

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

Answer 4

我已经尝试了所有的例子，发布在这里，但他们不工作没有额外的CSS。 尝试这个：

 <a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a> 

完美的工作没有任何额外的CSS。

Answer 5

只是摆脱背景颜色，边框和添加hover效果。 这是一个小提琴： http : //jsfiddle.net/yPU29/

 <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" class="button-link">Link 1</button></li> <li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li> <!-- ... --> </ul> </div> <!-- The actual form --> <div class="span9"> <!-- ... --> </div> </div> </form> 

CSS：

 .button-link { background-color: transparent; border: none; } .button-link:hover { color: blue; text-decoration: underline; }