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

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>