【问题标题】：Why bootstrap button no linking to another page?为什么引导按钮没有链接到另一个页面？
【发布时间】：2017-05-22 02:17:12
【问题描述】：

我编写了这段代码。我需要前两个按钮将我带到其他页面，但它不起作用。我正在使用 href。

<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>

    <button type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</button>
    <button type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</button>
    <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>

【问题讨论】：

使用 Enviar SMS。按钮没有href。
使用链接测试代替按钮标签。它会起作用的。
不使用按钮使用锚标签

标签： html twitter-bootstrap button href

【解决方案1】：

如果要链接，请使用a 标签，而不是button：

<a class="btn btn-link btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>

【讨论】：

添加缺少的标签字母。
我认为使用了引导程序 - 所以 btn 类使它看起来像按钮了。

【解决方案2】：

尝试使用a 标签而不是button 标签

<div class="container">
  <div class="menu-principal">
    <h2>MENÚ PRINCIPAL</h2>    
    <a type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>
    <a type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</a>
    <a type="button" class="btn btn-danger btn-lg btn-block">SALIR</a>
  </div>

【讨论】：

【解决方案3】：

<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>

    <a href="/enviarSMS.html"><button type="button" class="btn btn-primary btn-lg btn-block">Enviar SMS</button></a>
    <a href="/agregarNumero.html"><button type="button" class="btn btn-primary btn-lg btn-block">Agregar número de celular</button> </a>
    <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>

你必须使用<a> 标签。你不能将href添加到<button>

【讨论】：

【解决方案4】：

您需要更新您的代码如下：-

使用 a 标签而不是 button。并且还检查了引导脚本（JS 和 CSS）所需的参考。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>

    <a href="/enviarSMS.html" class="btn btn-primary btn-lg btn-block">Enviar SMS</a><br>
    <a href="/agregarNumero.html" class="btn btn-primary btn-lg btn-block">Agregar número de celular</a><br>
    <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>    
</body>
</html>

也可以使用：-

<div id="browse_app">
  <a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>

【讨论】：

【解决方案5】：

这应该是

HTML

<div class="container">
    <div class="menu-principal">
      <h2>MENÚ PRINCIPAL</h2>
      <button type="button" class="btn btn-primary btn-lg btn-block">
           <a href="/enviarSMS.html"> Enviar SMS</a>
      </button>
      <button type="button" class="btn btn-primary btn-lg btn-block">
           <a href="/agregarNumero.html"> Agregar número de celular</a>   
      </button>
      <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>

【讨论】：

HTML 不允许 BUTTON 元素中包含 A 元素。
对不起。它将是<div class="container"> <div class="menu-principal"> <h2>MENÚ PRINCIPAL</h2> <a href="/enviarSMS.html"><button type="button" class="btn btn-primary btn-lg btn-block"> Enviar SMS</button></a> <a href="/agregarNumero.html"><button type="button" class="btn btn-primary btn-lg btn-block"> Agregar número de celular</button></a> <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button> </div>
HTML 也不允许 A 元素中的 BUTTON 元素。
你的意思是它可以在你测试它的有限数量的浏览器中工作......大概没有将它们中的任何一个与屏幕阅读器或其他 AT 结合起来......这是不允许的 - HTML 规范非常清楚关于这一点——您刚刚在具有错误恢复的环境中进行了测试，这种情况恰好在这种情况下有效。