Как заставить загрузочные столбцы 4 отрегулировать высоту в соответствии с внутренним содержимым в строке?

Question

Я хочу показать количество записей ссылок в col-md-6, используя цикл while. Когда я отображаю все содержимое ссылки и если высота одного столбца col-md-6 меньше, чем в другом параллельном столбце, он создает пробел. Пожалуйста, предложите мне, как удалить эти пробелы. Вот скриншот проблемы прилагается

Я хочу удалить пустое пространство под первым столбцом

Полный код после выполнения цикла Loop:

<div class="row container pl-5">

          <div class="col-lg-6 links pt-0">
          <h4>ACTIVATIONS LINKS</h4>
        <ol>

        <li><a target="_blank" href="t">Omni - Verizon Activation</a></li>

                  </ol>
          <br />
        </div> <!----Col END--->



                   <div class="col-lg-6 links pt-0">
          <h4>VERIZON CUSTOMER SERVICE LINKS</h4>
        <ol>

        <li><a target="_blank" href="https://www.verizonwireless.com/featured/better-matters/?map=4glte#maps">Interactive Coverage Map</a></li>


        <li><a target="_blank" href="https://www.verizonwireless.com/switch-to-verizon/">Check Number Port-In Status</a></li>


        <li><a target="_blank" href="fgh">How to Complete an Assumption of Liability</a></li>


        <li><a target="_blank" href="https://www.verizonwireless.com/support/trip-planner-tool/#/tripPlanner">Trip Planner - International Rate Plans</a></li>


        <li><a target="_blank" href="https://www.verizonwireless.com/my-verizon/">My Verizon</a></li>


        <li><a target="_blank" href="https://www.verizonwireless.com/discount-program/">Verizon Discount Enrollment</a></li>


        <li><a target="_blank" href="https://www.verizonwireless.com/military/">Military Discount Enrollment</a></li>


        <li><a target="_blank" href="https://www.verizonwireless.com/solutions-and-services/hum/">HUM Service Info</a></li>

                  </ol>
         </div> <!----Col END--->
</div> <!----ROW END--->

Answer 1

.row.container{
   -webkit-columns: 2;
   columns: 2;
   -webkit-column-width: auto;
   column-width: auto;
   -webkit-column-count: 2;
   column-count: 2;
   display:block;
}
.row.container .links{
    width:100%;
    max-width:100%
}

Answer 2

Разрыв - это результат того, что два столбца в верхней части содержатся в одной строке. Этот ряд заканчивается до начала следующего. Вы можете поместить свой контент в один ряд, чтобы сделать его более компактным.

Возможно, вам понадобится расширить фрагмент, чтобы увидеть это в действии.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container pl-5">

  <div class="col-lg-6 links pt-0">
    <h4>ACTIVATIONS LINKS</h4>
    <ol>

      <li><a target="_blank" href="t">Omni - Verizon Activation</a></li>

    </ol>
    <h4>ACTIVATIONS LINKS</h4>
    <ol>

      <li><a target="_blank" href="t">Omni - Verizon Activation</a></li>

    </ol>
    <br />
  </div>
  <!----Col END--->



  <div class="col-lg-6 links pt-0">
    <h4>VERIZON CUSTOMER SERVICE LINKS</h4>
    <ol>

      <li><a target="_blank" href="https://www.verizonwireless.com/featured/better-matters/?map=4glte#maps">Interactive Coverage Map</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/switch-to-verizon/">Check Number Port-In Status</a></li>


      <li><a target="_blank" href="fgh">How to Complete an Assumption of Liability</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/support/trip-planner-tool/#/tripPlanner">Trip Planner - International Rate Plans</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/my-verizon/">My Verizon</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/discount-program/">Verizon Discount Enrollment</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/military/">Military Discount Enrollment</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/solutions-and-services/hum/">HUM Service Info</a></li>

    </ol>

    <h4>VERIZON CUSTOMER SERVICE LINKS</h4>
    <ol>

      <li><a target="_blank" href="https://www.verizonwireless.com/featured/better-matters/?map=4glte#maps">Interactive Coverage Map</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/switch-to-verizon/">Check Number Port-In Status</a></li>


      <li><a target="_blank" href="fgh">How to Complete an Assumption of Liability</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/support/trip-planner-tool/#/tripPlanner">Trip Planner - International Rate Plans</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/my-verizon/">My Verizon</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/discount-program/">Verizon Discount Enrollment</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/military/">Military Discount Enrollment</a></li>


      <li><a target="_blank" href="https://www.verizonwireless.com/solutions-and-services/hum/">HUM Service Info</a></li>

    </ol>
  </div>
  <!----Col END--->
</div>
<!----ROW END--->