Элементы начальной загрузки занимают всю ширину строки

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я хочу, чтобы элементы внутри 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>

1. getbootstrap.com/docs/4.3/utilities/flex

2. Какую библиотеку построения диаграмм вы используете? Как указывалось ранее, flexbox равномерно разместит элементы, но не гарантирует выравнивания с метками оси. Возможно, вы сможете подключиться к созданию ярлыка и переопределить его, чтобы сделать их ссылками.

3. Я использую Chart.js . Проблема в том, что он рисует график на canvas, а canvas не поддерживает ссылки из коробки, вам вроде как нужно взломать его, чтобы работать. Код становится нечитаемым.

Ответ №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>

1. Первый и последний элемент не выровнены. Они должны располагаться как можно левее и правее ( см. Изображение ).

2. но в результате фрагмента он отображается правильно, не так ли??

3. Да, странно. Я проверю, что не так с моим кодом.

4. проверьте ширину текстового раздела «OK»