Bootstrap4，btn和btn-primary类不适用于链接（“ a”标签）

Question

I am using Bootstrap version 4.1, there are no custom styles in my page. Here is the code for displaying buttons:

<div class="btn-group" role="group" aria-label="">
<a class="btn btn-primary" type="button" href="{% url 'website_admin_create_user' %}">
    <i class="fas fa-user-plus"></i>&nbsp;{% trans 'Add user' %}
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#listFilter" aria-expanded="false" aria-controls="listFilter">
    <i class="fas fa-filter"></i>&nbsp;{% trans 'Filters' %}
</button>

The problem is that, style for a tag is not working, despite I can see it in browser inspector. What might cause such behavior?

Answer 1

您正在<a>标记上使用按钮css类，只需将其切换为<button>无需<a>

Answer 2

Change your line to

<a href="{% url 'website_admin_create_user' %}">
   <button  class="btn btn-primary">
      <i class="fas fa-user-plus"></i>&nbsp;{% trans 'Add user' %}
   </button>
</a>

instead of

<a class="btn btn-primary" type="button" href="{% url 'website_admin_create_user' %}">
     <i class="fas fa-user-plus"></i>&nbsp;{% trans 'Add user' %}
</a>

Answer 3

发现了问题： type="button"造成了此混乱，只需将其删除，一切都会按预期进行。