Bootstrap按钮href属性点击无响应，求助原因及解决方法

原因 #

<button>标签本身不支持href属性，这个属性是专门给<a>（链接）标签设计的，所以给按钮加href，浏览器不会识别该属性，自然不会触发跳转行为。

解决办法 #

有两种简单的处理方式：

方法1：换成<a>标签（推荐）

Bootstrap的list-group-item-action类完全可以用在<a>标签上，既能保留按钮样式，又能原生支持跳转。修改后的代码如下：

<ul class="list-group list-group-flush">
    <li class="list-group-item px-3 border-0 active text-black">
        <div class="row">
            <div class="col-6 col-sm-2">
                <strong class="text-gray-dark">App</strong>
            </div>
            <div class="col-6 col-sm-3">Description</div>
        </div>
    </li>
    <a href="https://mydomein.com" class="list-group-item list-group-item-action" role="button">
        <div class="row">
            <div class="col-6 col-sm-2">
                <strong class="text-gray-dark">Hello World</strong>
            </div>
            <div class="col-6 col-sm-3">Description</div>
        </div>
    </a>
</ul>

添加role="button"是为了让辅助设备识别这是按钮样式的交互元素，提升页面可访问性。

方法2：给<button>添加点击事件

如果一定要保留<button>标签，可通过JavaScript实现跳转：

<ul class="list-group list-group-flush">
    <li class="list-group-item px-3 border-0 active text-black">
        <div class="row">
            <div class="col-6 col-sm-2">
                <strong class="text-gray-dark">App</strong>
            </div>
            <div class="col-6 col-sm-3">Description</div>
        </div>
    </li>
    <button onclick="window.location.href='https://mydomein.com'" type="button" class="list-group-item list-group-item-action">
        <div class="row">
            <div class="col-6 col-sm-2">
                <strong class="text-gray-dark">Hello World</strong>
            </div>
            <div class="col-6 col-sm-3">Description</div>
        </div>
    </button>
</ul>

也可以用更规范的事件监听（避免内联JS，推荐写法）：

<button id="jumpButton" type="button" class="list-group-item list-group-item-action">
    <div class="row">
        <div class="col-6 col-sm-2">
            <strong class="text-gray-dark">Hello World</strong>
        </div>
        <div class="col-6 col-sm-3">Description</div>
    </div>
</button>

<script>
document.getElementById('jumpButton').addEventListener('click', function() {
    window.location.href = 'https://mydomein.com';
});
</script>

内容的提问来源于stack exchange，提问作者Chris G.