html - 行全宽中的引导跨度元素

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>

标签： htmlcsstwitter-bootstrap

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>