Bootstrap - 在jumbotron上拥有一张卡片的最佳方式是什么？ [关闭]答案

【问题标题】：Bootstrap - What would be the best way to have a card over a jumbotron? [closed]Bootstrap - 在jumbotron上拥有一张卡片的最佳方式是什么？ [关闭]
【发布时间】：2020-12-11 08:10:37
【问题描述】：

我正在做一个项目，我想让卡片覆盖在 jumbotron 上。（见图）虽然这张卡将在网站的正文中。这是一个非常笼统的问题，但我对如何在引导程序中完成这样的任务感到很困惑。

【问题讨论】：

标签： html bootstrap-4 flexbox

【解决方案1】：

https://jsfiddle.net/r0ny4dh6/6/ 也许这会对你有所帮助

要在滚动时修复侧边栏，我推荐 PrettyScroll 插件：

JS：

new PrettyScroll('.js-sidebar', {
    breakpoint: 575, // stop running the js when the window size is smaller than 575px
    offsetTop: 200, // space between the sticky element and the top of the window
    offsetBottom: 20, // space between the sticky element and the bottom of the window
});

CSS

aside .box {
   position: relative;
}
aside .card {
  position: absolute;
  top: 0;
  transform: translateY(-200px);
  left: 0;
  right: 0;
}
.demo {
  padding: 100px;
}
.jumbotron {
  padding-bottom: 200px;
}

HTML：

<div class="demo">
  <div class="container">
    <header>
      <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      </div>
    </header>
    <div class="row">
      <aside class="col col-6">
        <div class="box">
          <div class="card js-sidebar">
            <img class="card-img-top" src="https://picsum.photos/600/200" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </aside>
      <main class="col">
        a lot of text
      </main>
    </div>
  </div>
</div>
<script src="https://unpkg.com/pretty-scroll@1.1.0/js/pretty-scroll.js"></script>

【讨论】：