Bootstrap 3.3.7行内元素全屏宽度均匀分布及对齐需求

针对你在Bootstrap 3.3.7中想要实现的「row内n个元素全屏宽度、首元素左对齐、末元素右对齐、中间元素均等间距且与X轴标签对齐」的需求，最灵活的方式是借助CSS Flexbox来实现（Bootstrap 3本身没有内置Flex类，但我们可以自定义样式）。

核心思路 #

利用Flexbox的justify-content: space-between属性，它会自动让容器内的元素：

• 首个元素紧贴容器左侧
• 末个元素紧贴容器右侧
• 中间所有元素自动均分剩余空间，保持均等间距
  这个属性完美适配任意数量的元素（n值灵活变化），不需要手动计算间距。

修改后的代码 #

CSS部分

.wrapper { position: relative; }
.overlay { 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
  margin: 0 auto; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.loading { align-self: center; }

/* 自定义Flex分布样式 */
.flex-distributed-row {
  display: flex;
  justify-content: space-between;
  /* 移除Bootstrap row默认的左右margin，让元素撑满全屏宽度 */
  margin-left: 0;
  margin-right: 0;
  /* 确保和canvas宽度对齐，继承父容器宽度 */
  width: 100%;
}

/* 可选：避免a标签内容过长打乱布局 */
.flex-distributed-row a {
  flex-shrink: 1;
  white-space: nowrap;
}

HTML部分

<div class="container-fluid"> <!-- 改用container-fluid实现全屏宽度，需固定宽度则保留container -->
  <div class="wrapper hidden">
    <canvas id="testsRegression"></canvas>
    <div class="overlay">
      <p>Loading...</p>
    </div>
    <!-- 给row添加自定义flex类 -->
    <div class="row flex-distributed-row">
      <a href="#">87664</a>
      <a href="#">87735</a>
      <a href="#">87816</a>
      <a href="#">87947</a>
      <a href="#">88038</a>
    </div>
  </div>
</div>

关键细节说明 #

1. 全屏宽度适配：将外层container改为container-fluid可自动撑满屏幕；同时移除row默认的左右负margin，避免元素超出可视区域。
2. Flex布局兼容性：Bootstrap 3的row默认是float布局，我们通过display: flex覆盖它，Flexbox在IE10及以上都能正常工作，兼容性无需担心。
3. 灵活性保障：不管后续添加或减少a标签数量（n变化），justify-content: space-between都会自动调整元素间距，完全满足灵活适配的需求。
4. 与X轴标签对齐：确保canvas和row都继承父容器的100%宽度，就能保证元素和X轴标签完美对齐。

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