Bootstrap链接按钮点击后无选中状态边框问题咨询

我有一个链接按钮代码如下：

<div class="col-2">
      <a type="button" routerLink="auto-generate-schedules/generate" class="btn btn-primary mb-2">Generate Schedules
      </a>
</div>

点击该按钮时，它不会显示表示已选中的边框，但下方的Bootstrap原生按钮却能正常显示这个边框。请问如何让这个链接按钮也显示选中边框？

完整演示代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<div class="col-2">
  <a type="button" routerLink="auto-generate-schedules/generate" class="btn btn-primary mb-2">Generate Schedules
  </a>
</div>    
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

解决方法 #

Bootstrap的按钮选中边框（焦点样式）通过:focus伪类实现，但<a>标签默认不会像<button>一样在点击后自动获取焦点，或其焦点样式被默认规则覆盖。以下是几种可行方案：

1. 自定义CSS添加焦点样式 #

为带.btn类的<a>标签添加和Bootstrap原生按钮一致的焦点样式：

a.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

2. 点击后手动触发焦点 #

利用JavaScript在点击链接时强制获取焦点：

document.querySelector('a.btn').addEventListener('click', function() {
  this.focus();
});

如果使用Angular（因代码中用了routerLink），也可以直接在模板中处理：

<a type="button" routerLink="auto-generate-schedules/generate" class="btn btn-primary mb-2" (click)="$event.target.focus()">Generate Schedules</a>

3. 复用Bootstrap内置类（可选） #

Bootstrap的.btn-focus类可强制应用焦点样式，直接添加到链接按钮即可：

<a type="button" routerLink="auto-generate-schedules/generate" class="btn btn-primary mb-2 btn-focus">Generate Schedules</a>

注：部分Bootstrap版本可能无此类，建议优先使用自定义CSS方案。

内容的提问来源于stack exchange，提问作者janci