我有以下 html 内容，由 2 列组成，占屏幕大小的 50%。右栏仅包含背景图片。左列由 2 行组成。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Welcom to my page!</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"
asp-fallback-href="~/css/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" type="text/css" href="~/css/site.css" asp-append-version="true" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" asp-fallback-test="window.jQuery" crossorigin="anonymous"></script>
</head>
<body style="height: 100%;">
<main style="height: 100%;">
<div class="body-container" style="vertical-align: middle; height: 100%">
<partial name="_CookieConsentPartial" optional />
<div class="row no-margin" style="vertical-align: middle; height: 100%">
<div class="no-margin col-xl-6 col-lg-6 col-md-6 col-sm-6 mt-5" style="vertical-align: middle;">
<div class="row no-margin" style="width:100%;">
<header style="width:100%;">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow" style="width:100%;">
<div class="container justify-content-center text-center" style="width:100%;">
<a class="navbar-brand justify-content-center text-center" href="~/">Welcom to my page</a>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
@{
var result = Engine.FindView(ViewContext, "_LoginPartial", isMainPage: false);
@if (result.Success)
{
await Html.RenderPartialAsync("_LoginPartial");
}
else
{
throw new InvalidOperationException("The default Identity UI layout requires a partial view '_LoginPartial' " +
"usually located at '/Pages/_LoginPartial' or at '/Views/Shared/_LoginPartial' to work. Based on your configuration " +
$"we have looked at it in the following locations: {System.Environment.NewLine}{string.Join(System.Environment.NewLine, result.SearchedLocations)}.");
}
}
</div>
</div>
</nav>
</header>
</div>
<div class="row no-margin" style="width:100%; vertical-align: middle; align-items: center; justify-content: center;">
@RenderBody()
</div>
</div>
<div id="slideshow" class="no-margin col-xl-6 col-lg-6 col-md-6 col-sm-6 no-padding">
<div id="slideshow1"></div>
<div id="slideshow2"></div>
</div>
</div>
</div>
</main>
</body>
自定义CSS：
#slideshow {
width: 950px;
height: 970px;
position: relative;
}
#slideshow1, #slideshow2 {
position: absolute;
background-size: cover;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#slideshow2{
display:none;
}
我希望在调整屏幕大小时各列保持并排，而不是彼此堆叠。当屏幕大小调整到低于某个阈值时，可以隐藏仅包含背景图片的右栏。
以下是修改代码的方法：
d-none<main style="height: 100%;">
<div class="body-container" style="vertical-align: middle; height: 100%">
<!-- ... -->
<div class="row no-margin" style="vertical-align: middle; height: 100%">
<div class="no-margin col-xl-6 col-lg-6 col-md-6 col-sm-6 mt-5">
<!-- ... -->
</div>
<div id="slideshow" class="no-margin col-xl-6 col-lg-6 col-md-6 col-sm-6 no-padding d-none d-sm-block">
<div id="slideshow1"></div>
<div id="slideshow2"></div>
</div>
</div>
</div>
</main>
以下是更改的作用：
d-none d-sm-block#slideshow通过使用这些响应式类，左列和右列将在较大的屏幕上并排放置，而右列将在较小的屏幕上隐藏。