Как я могу создать равноудаленное пространство между словами на основе их длины?

Question

Предположим, у меня есть горизонтальный список:

О приеме Академики Исследования Новости События

Я хочу, чтобы они составляли n-единицу, кроме исходного слова, основанного на их длине.

---

|О |Прием |Академики |Исследования |Новости |События |

Иллюстрация выше, по сути, является сердцем моего вопроса.Как я могу сделать слова равноудаленными друг от друга?Как я могу изменить площадь прямоугольников, чтобы создать равноудаление?

Например, «Исследования» будут иметь гораздо большую площадь, чем «Новости», но их расстояние будет таким же, как и слова «О"и" Прием "и" Прием "и" Академики ".

 .school_info {
      background-color: black;
      text-align: center;
    }

    .school_info_row {
      margin: 0 10% 0 10%;
      width: auto;
      padding-bottom: 15px;
    }
    
    .public_info_container {
      padding-left: 0;
      padding-right: 0;
    }
    
    .public_info {
      font-size: 20;
      font-family:'Cinzel', serif;
      color: white;
      width: 150px;
    }

<div class="school_info">
          <div class="row school_info_row">
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">About</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Admissions</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Academics</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Research</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">News</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Events</a>
            </div>
          </div>
        </div>
    </div>

Answer 1

Ты почти понял.Итоговые значения столбца начальной загрузки должны составлять до 12. Ваш col-lg-x правильный, он добавляет до 12, вашему col-md-x также должно быть присвоено значение 2.Поскольку обе точки прерывания носителя lg и md используют значение 2, вы можете просто заменить его на col-2.Я предполагаю, что это начальная загрузка, потому что это классы начальной загрузки.Bootstrap также имеет класс mx-auto, поэтому вы можете сделать поля на равном расстоянии по оси X.

.school_info {
  background-color: black;
  text-align: center;
}


.public_info {
  font-size: 20;
  font-family:'Cinzel', serif;
  color: white;
  /*width: 150px;*/  
}

.hilite {
  border-left: 1px solid red;
  border-right: 1px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="school_info">
      <div class="row">
        <div class="col-2 hilite">
          <a class="public_info mx-auto" href="">About</a>
        </div>
        <div class="col-2 hilite">
          <a class="public_info mx-auto" href="">Admissions</a>
        </div>
        <div class="col-2 hilite">
          <a class="public_info mx-auto" href="">Academics</a>
        </div>
        <div class="col-2 hilite">
          <a class="public_info mx-auto" href="">Research</a>
        </div>
        <div class="col-2 hilite">
          <a class="public_info mx-auto" href="">News</a>
        </div>
        <div class="col-2 hilite">
          <a class="public_info mx-auto" href="">Events</a>
        </div>
      </div>
    </div>
</div>