0

按以下顺序排列 3 张引导卡的最佳方法是什么：

  • 左侧的 Card1
  • Card2 和 Card3 在右侧
  • Card2 有一个固定的高度
  • Card3 根据 Card2 的大小灵活
  • Card3 有一个自定义滚动条
  • 卡片是响应式的，并在移动屏幕上一个接一个地放置。

请看下图。

Bootstrap4 卡

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <div class="container">
  <div class="row">
    <div class="col-md-6 border">
      <div class="card shadow m-5">
        <div class="card-body" style="height:300px;">
          <h3>Card 1</h3>
        </div>
      </div>
    </div>
    <div class="col-md-6 border">
      <div class="d-flex flex-column">
        <div class="d-flex align-items-start">
          <div class="card shadow m-5">
            <div class="card-body">
              <h3>Card 2</h3>
            </div>
          </div>
        </div>
        <div class="d-flex align-items-stretch">
          <div class="card shadow m-5">
            <div class="card-body">
            <h3>Card 3</h3>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus.

Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna.

Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac.

Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  </body>
</html>

4

0 回答 0