时间戳

首页 > 解决方案 > 如何强制引导 4 列连续调整每个内部内容的高度？

html - 如何强制引导 4 列连续调整每个内部内容的高度？

问题描述

我想使用 while 循环显示 col-md-6 中的链接记录数。当我显示所有链接内容时，如果一个 col-md-6 的高度小于其他平行列，那么它会创建一个空白。请建议我如何删除这些空白。 这里附上问题截图

我想删除第一列下方的空白

While循环执行后的完整代码：

<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--->

标签： htmlbootstrap-4

解决方案

中断是顶部的两列包含在单行中的结果。该行在下一行开始之前结束。您可以将内容放在一行中以使其更紧凑。

您可能需要展开代码段才能看到它的实际效果。

<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--->

推荐阅读