使用 bootstrap-4 响应时如何更改粘性行为答案

【问题标题】：How to change sticky behavior when responsive with bootstrap-4使用 bootstrap-4 响应时如何更改粘性行为
【发布时间】：2021-03-29 21:22:09
【问题描述】：

我在我的项目中使用 angular 和 bootstrap。我有一个标题，它由两个部分和一个内容区域组成。当分辨率较小时，标题会换行。

Header and content on large screens

Header and content on small screens, wrapped

<div class="sticky row">
  <div class="col-md-7" style="height: 50px; background-color: seagreen;">
    Header A
  </div>
  <div class="col-md-5" style="height: 50px; background-color: skyblue;">
    Header B
  </div>
</div>
<div style="height: 1500px; width: 100%; background-color: slategray;">
  any content<br />
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

我还设置了标题，以便我的内容在标题下方流动。

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
}

正如您在 Stackblitz 中看到的那样，这很好用： https://stackblitz.com/edit/angular-bootstrap-responsive-sticky

但对于小屏幕，我希望 Header B 也可以滚动到 Header A 下方 并且不粘。由于 Header A 和 Header B 在一个 div 中，我不知道是否有任何方法可以做到这一点，同时，我想保留标题的包装。

感谢您的任何想法:)

【问题讨论】：

您可以在标题中不使用网格来实现此目的。而不是行和两个列，只需使用两个内联块 div。
谢谢 Arcteezy，我试过了。问题是，在包装 div 后使用 inline-block 并没有填充整个宽度；就我而言，我有 60% 和 40% 的 div；左边一最小宽度：800px；用于制动。这使其余部分为空：i.stack.imgur.com/ZbJlG.png
您可以将移动设备的宽度设置为 100%。 BTW 下面是一个很好的解决方案，但有重复的代码。如果这是一个问题，我可以使用内联 div 给出解决方案。
嗯，我该怎么做？如上所述，我将宽度设置为 60 和 40。没有重复代码的解决方案会更优雅:) 你能把它作为答案发布吗？
看看下面的答案是否合适。

标签： css angular bootstrap-4 responsive sticky

【解决方案1】：

我将大屏幕的标题比例设为 6:4。默认情况下，第一个分区是粘性的，第二个 div 仅在大屏幕上是粘性的。

HTML：

<div class="custom-col-6 sticky" style="height: 50px; background-color: seagreen;">
  Header A
</div>
<div class="custom-col-4" style="height: 50px; background-color: skyblue;">
  Header B
</div>

CSS：

.custom-col-4,
.custom-col-6 {
  width: 100%;
  display: inline-block;
}

@media (min-width: 768px) {
  .custom-col-6 {
    width: 60%;
  }
  .custom-col-4 {
    width: 40%;
    position: sticky;
    top: 0;
  }
}

演示：https://stackblitz.com/edit/angular-bootstrap-responsive-sticky-2aprb3?file=src/app/app.component.css

【讨论】：

在标题中没有周围的 div 给我带来了一些麻烦，因为在现实生活中，我没有为两个标题 div 设置固定高度（如示例中所预期的那样），但一个依赖于其他。但是没有冗余代码更优雅，我将使用固定值或动态高度变化来解决高度问题。还没决定:) THX

【解决方案2】：

您可以使用 bootstrap 4 网格属性隐藏/显示 div。请检查以下代码：

<div class="sticky row">
  <div class="col-md-7" style="height: 50px; background-color: seagreen;">
    Header A
  </div>
  <div class="d-none d-md-block col-md-5" style="height: 50px; background-color: skyblue;">
    Header B
  </div>
</div>
 <div class="d-block d-md-none" style="height: 50px; background-color: skyblue;">
    Header B
  </div>
<div style="height: 1500px; width: 100%; background-color: slategray;">
  any content<br />
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

【讨论】：

如果您需要两个标题元素的周围 div，例如要具有相同的动态高度，这是我推荐的答案。如果您可以设置固定高度，请参阅接受的答案。