Bootstrap 如何将此div固定到右上方

yws3nbqq 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(185)

我想在屏幕的右上角固定一个div：（见此图中的蓝色div）

我使用的是bootstrap 5.3，代码是：

<body class="d-flex flex-column h-100">
<x-horizontal-menu />
<main class="flex-shrink-0 pb-3">
    <div class="container">
        
        <h1 class="text-center text-primary">Noter un travail</h1>
        <div class="row">
            <div class="col-md-8">
            </div>
            
            {{-- how to fix this div to the top right ? --}}
            <div class="col-md-4">
            </div>
        </div>
    </div>
</main>

还有一个导航栏（它是组件）。
我已经尝试添加一些类和类的组合“粘顶”或“固定顶”。没有成功我怎么能这么做呢？

twitter-bootstrap

来源：https://stackoverflow.com/questions/77042345/how-to-fix-this-div-to-the-right-top

2条答案

按热度按时间

ibps3vxo1#

您正在使用sticky-top的正确路径。
实际上，两列的高度都是较高列的高度，因为父列.row的类型是：display: flex;。
右边的div是粘滞的，但由于它具有相同的高度，它的行为并不符合您的要求。
你需要做的是确保正确的div是它自己内容的高度，你可以在flex容器中通过添加：align-self-start。
你会得到：<div class="col-md-4 sticky-top align-self-start">

参见片段：

p {
 min-height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<body class="d-flex flex-column h-100">
  <main class="flex-shrink-0 pb-3">
    <div class="container">

      <h1 class="text-center text-primary">Noter un travail</h1>
      <div class="row">
        <div class="col-md-8">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo hic sunt eius ducimus facilis, quidem illum, fuga dolor aspernatur vero dolorem laudantium ad, alias at optio itaque quaerat necessitatibus.</p>
        </div>

        <div class="col-md-4 sticky-top align-self-start">
          {{-- how to fix this div to the top right ? --}}
        </div>
      </div>
    </div>
  </main>

赞(0）回复(0）举报 2023-09-28

6fe3ivhb2#

<div class="row">应该有固定的高度。比如600 px; overflow-scroll。
md-8 and md-4是兄弟姐妹。
现在提供md-4postion: sticky; top: 20px;，请参考this。
现在右边的面板将粘在顶部：20 px，而左边的面板将滚动。

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 如何将此div固定到右上方

2条答案

相关问题

热门标签

最新问答