如何解决ASP.NET 固定顶级类将列移动到不同的地方
这是网站布局:
<div class="min-vh-100 d-flex flex-column">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom box-shadow">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ASP.NET</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="btn btn-primary" asp-area="" asp-controller="Home" asp-action="Create">
<i class="fas fa-plus"></i> Create
</a>
</li>
<li class="nav-item">
<form class="form-inline" asp-controller="Search" asp-action="Index">
<input name="query" class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="flex-fill d-flex flex-column">
<div class="container d-flex flex-column flex-fill">
<div class="row flex-fill">
<div class="col-md-9 bg-light p-1">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<div class="col-md-3 bg-info p-1 align-content-center">
<!-- a bunch of data displayed in foreach -->
</div>
</div>
</div>
</div>
<footer class="border-top footer bg-dark text-light">
<div class="container">
© 2021 - ASP.NET - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
</div>
网站看起来应该如此。但我想制作第二个(右列)fixed-top
,因此显示的数据会在用户滚动浏览网站时停留在同一个位置。
解决方案很简单。只需将 fixed-top
放在这里:
<div class="col-md-3 bg-info p-1 align-content-center fixed-top">
<!-- a bunch of data displayed in foreach -->
</div>
它应该可以工作。除了我在这里,这意味着它没有。右列被神奇地传送到左上角并一直停留在那里,覆盖了左列的大部分,基本上是在错误的地方。
有什么建议可以解决吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。