在较小的屏幕尺寸上，如何让我的按钮保持在显示屏下方？

Question

我希望我的超大屏幕在移动到较小的屏幕尺寸时有一些反应性。 在 md、lg、xl 上，我希望我的段落留在屏幕上，但在 sm、xs 上，我只想显示 display-1 和按钮。 xs 大小没有问题，但在 sm 按钮内联。 关于解决这个问题的想法？

编辑：（改写）我有 3 个元素堆叠在一列中，并以我的超大屏幕（h1、p、按钮）为中心。 我希望我的标题和我的按钮出现在所有屏幕尺寸，但在 sm 或 xs 时有 p d-none。 这工作正常。 但是，在 sm 和 md 屏幕尺寸下，随着段落不再显示，按钮会内联移动并且不会停留在我的 h1 之下。 我怎样才能把它们堆成一列？ 谢谢。

 .jumbotron { background-image: url("https://images.unsplash.com/photo-1531346618680-ab17d6dcd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"); background-size: cover; background-repeat: no-repeat; background-size: 100% 100%; height: 500px; }

 <section class="mx-0"> <div class="container-fluid px-0"> <div class="jumbotron mx-0"> <div class="row justify-content-center pt-5"> <h1 class="display-1">Welcome!</h1> <p class="lead text-center d-none d-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus, ligula at luctus mattis, mauris nulla pharetra tortor, sit amet.</p> <button class="btn btn-md">More about me!</button> </div> </div> </div> </section>

Answer 1

您需要使上层位置：相对和按钮类位置：绝对