当h1在md或lg视图bootstrap 4中具有固定位置时，我如何在sm或md视图中确定h1上的位置

Question

我有一半的页面带有h1(固定位置(，另一列为空。当我向下滚动时，col向上移动，h1保持不变。。。当切换到sml或md大小的屏幕时，如何使h1处于绝对位置。我有这个。。。。

<section id="header">
<div class="container-fluid">
<div class="row height align-items-center">
<div class="col-md-6 text-center position-fixed">
<h1>My h1 title</h1>
</div>
<div class="col-md-6">
<!-- empty column to the right, scroll down -->
</div>
</div>
</div>
</section>

Answer 1

在css文件中，您可以使用@media规则

在这里，您可以看到不同引导列大小的宽度。

所以在你的情况下，md的720px就是你想要的。所以这可能是要放在css中的代码：

@media only screen and (max-width: 720px) {
h1 {
position: absolute;
}
}