Question

我具有以下Bootstrap 4布局，该布局使用两列...

左列，包含三张列中的卡片
右列，包含一个列表组

列表组的内容长于左侧三张卡的内容。

如何使用Bootstrap限制列表组容器的高度，以匹配包含三张卡片的相邻列的高度？

现在，我已经使用了CSS max-height，但这不是我继续的合适方法。

    <!-- Left column -->
   <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

      <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
            <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
              First card is here.
            </a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
          <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
            Second card is here
          </a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
          <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
            Third card is here
          </a>
        </div>

      </div><!-- end .row -->

  </div><!-- end Left column -->


  <!-- Right column -->
  <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 725px; overflow-y: scroll;">

     <div class="list-group list-unstyled">
      List group is here
     </div>

  </div>

NB。这些卡片使用.card-img-overlay，其尺寸与内部使用的图像相同。

Answer 1

如here所述，您将在父列上设置overflow:auto并将列表组绝对定位在该列中。

  <div class="row">
        <!-- Left column -->
        <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
              First card is here.
            </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
            Second card is here
          </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
                        Third card is here
                      </a>
                </div>
            </div>
            <!-- end .row -->
        </div>
        <!-- Right column -->
        <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block overflow-auto">
            <div class="list-group list-unstyled scroll overflow-auto">
            </div>
        </div>
   </div>

https://www.codeply.com/go/okYRFgEro5

Answer 2

将它们包含在一个父对象div中，并在其上放置高度div。

<div id="parentDiv" style="height: 350px">
<!-- Left column -->
<div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
        <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
          First card is here.
        </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Second card is here
      </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Third card is here
      </a>
    </div>

  </div><!-- end .row -->

 <div class="list-group list-unstyled">
  List group is here
 </div>

</div>
</div><!-- end parent div now -->

如何减少Bootstrap列的高度以匹配相邻列？

2 个答案: