如何使引导程序中的 < 按钮 > 看起来像导航标签中的普通链接？

我工作在(以前的 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>

Does Bootstrap have any way to make these <button>s look like they were actually <a>s?

154098 次浏览
小开

正如官方文档 中指出的，只需应用类 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>

小开

只需在按钮标记中添加 move _ buttoncss 作为类即可，您可以验证 Link1的代码

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

enter image description here

额外样式编辑

添加 color: #337ab7;、 :hover和 :focus以匹配 OOTB (bootstrap3)

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

只要使普通链接看起来像按钮:)

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

Href 代码中的“ role”使其看起来像按钮，ofc 可以添加更多变量，如 class。

小开

Just get rid of the background color, borders and add hover effects. Here's a fiddle: 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;
}
小开

我已经尝试了所有的例子，张贴在这里，但他们没有额外的 CSS 工作。尝试这样:

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

不需要任何额外的 CSS 就可以很好地工作。

小开

In bootstrap 3, this works well for me:

.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>

Demo

小开

这里有一个例子:

<form method="POST" >
<button type="submit" class=" linkish  my-1 far fa-thumbs-down fa-2x">  </button>


<button type="submit" class=" linkish  btn btn-primary">click me</button>


</form>

以及 css 风格:

.linkish {
background-color: transparent!important;
border: 0!important;
color: blue!important;
cursor: pointer!important;
display: inline!important;
margin: 0!important;
outline: none!important;
padding: 0!important;
text-decoration: none!important;
}






.linkish:hover {
text-decoration: underline!important;
}

这只是一个例子，并根据您的案例/需求进行更改。

我希望这能帮上忙。


提交答案