时间戳

首页 > 解决方案 > Bootstrap 中的滚动卡片

html - Bootstrap 中的滚动卡片

问题描述

我想要实现的是让两个框的宽度相等，即左侧卡片（带有图像）的大小始终是右侧卡片与列表框的最大宽度。

所需的结果将是相同的宽度，左侧卡片的剪切内容带有滚动条。

我尝试过溢出 CSS 属性，但是它们永远不会导致滚动条正常工作。我会为列表卡指定一个以像素为单位的高度，并且会出现一个滚动条，但是它们与左侧卡的高度不匹配。

您可以在全屏下方查看我的示例，因为非移动视图存在问题。

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

<div class="container-fluid pt-1 pb-1" style="background: #eeeeee">
  <div class="row">
    <div class="col">
      <h2 class="text-center h2-special-gray text-center" style="color: #444!important; font-family: 'Source Sans Pro',sans-serif; padding-top:15px;">Meetings unlike any other</h2>
    </div>
  </div>
  <div class="container-fluid pt-4 pb-5">
    <div class="row mx-lg-2 mx-sm-0">
      <div class="col-md-8 col-sm-12 d-flex">
        <div class="card">
          <a href="my link here">
            <img class="card-img-top" src="https://place-hold.it/300x100/666/fff/000.gif" alt="Card image cap">
          </a>
          <ul class="nav nav-pills nav-fill navtop">
            <li class="nav-item px-sm-0">
              <a class="nav-link active" href="my link/">WELCOME</a>
            </li>
          </ul>
          <div class="card-body">
            <p class="card-text">
              <span class="lead">Here I am begin example</span> text text text text text text text text text text text text text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext
              text texttext text texttext text texttext text text
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-12  d-flex ">
        <div class="card w-100">
          <div class="card-body" style="padding-left: 0!important; padding-right: 0!important; padding-top: 0!important;">
            <ul class="nav nav-pills nav-fill navtop">
              <li class="nav-item px-sm-0">
                <a class="nav-link active text-left" href="https://meetings.cshl.edu/">UPCOMING EVENTS</a>
              </li>
            </ul>

            <div class="position-absolute all-0 d-flex flex-column">
              <ul class="list-group list-group-hover d-flex overflow-auto" style="overflow-y: auto;">

                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
              </ul>
            </div>

            <div class="sidebar_item">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

我能够通过在以下行添加引导实用程序类“h-100”来解决此问题，

<div class="position-absolute all-0 d-flex flex-column w-100 h-100">

推荐阅读