Question

如何将一个链接放在带引导程序的按钮上？

bootstrap文档中有4种方法：

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

第一个对我不起作用，没有按钮显示，只有带链接的文字，感觉它是我正在使用的主题。

第二个按钮显示了我想要的按钮，但是点击时代码是否会使按钮链接到另一个页面？

干杯

Answer 1

如果您真的不需要按钮元素，只需将类移到常规链接：

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

相反，您也可以将按钮更改为链接：

<button type="button" class="btn btn-link">Link</button>

Answer 2

最简单的解决方案是您的第一个示例：

<a href="#link" class="btn btn-info" role="button">Link Button</a>

正如您所说，它不适合您的原因很可能是您正在使用的主题中存在的问题。没有理由为此采用膨胀的额外标记或内联Javascript。

Answer 3

您可以在按钮的点击事件上调用一个函数。

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

OR 使用此代码

<a href="#link" class="btn btn-info" role="button">Link Button</a>

Answer 4

在<button>标记

中使链接颜色正常工作的另一个技巧

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

请注意，在bs4 beta中，例如btn-primary-outline已更改为btn-outline-primary

Answer 5

结合上述答案，我找到了一个可能对您有帮助的简单解决方案：

<button type="submit" onclick="location.href = 'your_link';">Login</button>

通过添加内联JS代码，您可以转换链接中的按钮并保持其设计。

Answer 6

这就是我的解决方法

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>

Answer 7

您只需添加以下代码；

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>

Answer 8

我认为最简单和干净的方法是（没有任何额外的 javascript 函数）：

<a class="btn" href="#">
   <i class="fas fa-cloud"></i>
</a>

要使用 fontawesome 图标，您只需将以下链接放在标题中：

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

仅此而已

如何在带引导程序的按钮上放置链接？

8 个答案: