Bootstrap btn-group-justified样式不生效问题求助

嘿，我来帮你捋清楚这个问题～首先得明确你用的是哪个版本的Bootstrap，因为btn-group-justified这个类在不同版本里的用法区别很大，甚至在Bootstrap 4及以后的版本里直接被移除了，这大概率就是你遇到的核心问题：

如果你用的是Bootstrap 3 #

在Bootstrap 3里，btn-group-justified要实现两端对齐，对于<a>标签的按钮，必须给每个按钮单独套一个btn-group容器，你现在的代码直接把<a>放在btn-group-justified下面，不符合这个要求，所以对齐效果出不来。

修正后的代码应该是这样：

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <a class="btn btn-success" href="{% url 'interface:data' user_id 24 %}"> 24h </a>
  </div>
  <div class="btn-group">
    <a class="btn btn-success" href="{% url 'interface:data' user_id 12 %}"> 12h </a>
  </div>
  <div class="btn-group">
    <a class="btn btn-success" href="{% url 'interface:data' user_id 4 %}"> 4h </a>
  </div>
</div>

为啥要这么做？因为Bootstrap 3的btn-group-justified是靠表格布局实现的，它会把直接子元素当成表格单元格，但<a>标签没法直接作为表格单元格的有效子元素，必须用btn-group包裹一下，才能让布局正确渲染。

如果你用的是Bootstrap 4或5 #

从Bootstrap 4开始，官方直接移除了btn-group-justified这个类，改用Flexbox布局来实现按钮组的两端对齐。你得换用Flex相关的类来重构代码：

两种实现方式供你选： #

第一种是直接用Flex容器来做：

<div class="d-flex justify-content-between">
  <a class="btn btn-success flex-fill mx-1" href="{% url 'interface:data' user_id 24 %}"> 24h </a>
  <a class="btn btn-success flex-fill mx-1" href="{% url 'interface:data' user_id 12 %}"> 12h </a>
  <a class="btn btn-success flex-fill mx-1" href="{% url 'interface:data' user_id 4 %}"> 4h </a>
</div>

第二种是保留按钮组的关联样式（比如按钮之间的边框合并），用btn-group配合Flex类：

<div class="btn-group w-100" role="group">
  <a class="btn btn-success flex-fill" href="{% url 'interface:data' user_id 24 %}"> 24h </a>
  <a class="btn btn-success flex-fill" href="{% url 'interface:data' user_id 12 %}"> 12h </a>
  <a class="btn btn-success flex-fill" href="{% url 'interface:data' user_id 4 %}"> 4h </a>
</div>

这里的w-100让按钮组占满父容器的宽度，flex-fill让每个按钮平分可用空间，自然就实现两端对齐的效果了。

最后再检查两个小细节 #

• 确认你引入的Bootstrap CSS版本和代码匹配，别混用不同版本的资源，不然很容易出现样式冲突。
• 看看按钮组的父容器有没有足够的宽度，如果父容器本身很窄，两端对齐的效果也看不出来哦。

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