如何强制自举程序的4列连续调整每个内部内容的高度?

时间:2019-01-12 03:53:59

标签: html bootstrap-4

我想使用while循环显示col-md-6中的链接记录数。当我显示所有链接内容时,如果一个col-md-6的高度小于另一个平行列的高度,则它将创建空白。请建议我如何删除这些空白。 Here the problem screenshot attached

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

List<IItem<TValue>>