时间戳

首页 > 解决方案 > 如何让我的按钮在较小的屏幕尺寸上保持在显示屏下方？

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

问题描述

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

编辑：（改写）我有 3 个元素堆叠在一列中，并在我的 jumbotron （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>

标签： htmlcss

解决方案

您需要使上层位置：relative 和按钮类位置：absolute

推荐阅读