Bootstrap 边栏中的垂直对齐方式

brc7rcf0 于 2023-01-10 发布在 Bootstrap

关注(0)|答案(1)|浏览(197)

我应该如何对齐边栏中的项目，如下图所示：
见图片

我的主要问题是页脚的格式被固定在底部，主侧边栏容器溢出并滚动，但仍然在侧边栏标题和侧边栏底部元素文本容器之间，因此既不重叠，同时使该元素可滚动，而不滚动整个侧边栏
我目前掌握的情况：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-4 bg-dark text-white" style="height: 100vh; width:250px;">
            <!-- <div class="col bg-primary">
                test
            </div>

            <div class="col bg-danger">
                test 2
            </div>

            <div class="col bg-primary" style="position: fixed; bottom: 0;">
                test 3
            </div> -->

            <div class="d-flex flex-column justify-content-start mb-3">
                <div class="p-2 bg-primary">
                    Flex item 1
                </div>

                <div class="p-2 bg-danger flex-grow-1">
                    Flex item 2
                </div>
                <div class="p-2 bg-primary" style="position:fixed; bottom:0;">
                    Flex item 3
                </div>
            </div>
        </div>

        <div class="col bg-secondary text-white">
            main body
        </div>
    </div>

    <!-- <div class="row">
        <div class="col bg-secondary text-white">
            main body
        </div>
    </div> -->
</div>

使用 Bootstrap 5.3.0 α 1

twitter-bootstrap

来源：https://stackoverflow.com/questions/75053198/vertical-alignment-in-sidebar

1条答案

按热度按时间

nnvyjq4y1#

下面是一个最小的示例，说明如何使用Bootstrap V5.3创建一个完整的页面布局，其中的容器应该在溢出时滚动。
如果你想了解它是如何工作的，请阅读文档。

阅读关于flex-grow-1的信息，或者如果您是flex start here的新手。
Learn how overflow works.

nav {
  height: 100vh;
  max-height: 100vh;
  background: lightgreen;
}

main {
 background: lightyellow;
}

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid px-0">
    <div class="row gx-0">
      <nav class="col-4 p-2 d-flex flex-column gap-1">
        <div class="">
          <h5>
            Sidebar header
          </h5>
        </div>
        <div class="">
          Some content
        </div>
        <div class="">
          Some other content
        </div>
        <div class="flex-grow-1 overflow-auto">
          sidebar scroll
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
        </div>
        <div class="">
          Sidebar footer
        </div>
      </nav>
      <main class="col">
        main body
      </main>
    </div>
  </div>
</body>
</html>

- 如果<main>在100vh处也应overflow:scroll**，则添加CSS：

main {
  height: 100vh;
  max-height: 100vh;
}

在HTML中：

<main class="col overflow-auto">

- 如果<main>应增加高度以包含其内容，而您希望<nav>也随之增加**：

nav {
 /*max-height: 100vh;*/ 
   min-height: 100vh;
}

赞(0）回复(0）举报 2023-01-10

我来回答

Bootstrap 边栏中的垂直对齐方式

1条答案

相关问题

热门标签

最新问答