行全宽度中的自举跨度元素

Question

我希望row中的项目采用全宽并均匀分布。第一项应位于最左边，而右边项应位于最右边。中间的元素应均匀分布。我希望它们与x轴上的标签对齐（请参见下图）。可以有 n个标签（因此行中有n个项目），因此解决方案必须灵活。我正在使用 Bootstrap v3.3.7 。

这是HTML代码：

.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;
}

<div class="container">
  <div class="wrapper hidden">
    <canvas id="testsRegression"></canvas>
    <div class="overlay">
      <p>Loading...</p>
    </div>
    <div class="row">
      <a href="#">87664</a>
      <a href="#">87735</a>
      <a href="#">87816</a>
      <a href="#">87947</a>
      <a href="#">88038</a>
    </div>
  </div>
</div>

Answer 1

使用flex-box来实现。

.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;
}

.row{
display: flex;
justify-content: space-between; }


body{
margin: 0}

<div class="container">
  <div class="wrapper hidden">
    <canvas id="testsRegression"></canvas>
    <div class="overlay">
      <p>Loading...</p>
    </div>
    <div class="row">
      <a href="#">87664</a>
      <a href="#">87735</a>
      <a href="#">87816</a>
      <a href="#">87947</a>
      <a href="#">88038</a>
    </div>
  </div>
</div>