2023年1月9日 12:29:38go评论73阅读模式

英文:

Vertical alignment in sidebar

问题

如何像这样对齐侧边栏中的项目：

请参见图像

侧边栏中的垂直对齐

我的主要问题是底部的格式固定在底部，而主侧边栏容器溢出并滚动，但仍位于侧边栏标题和侧边栏底部元素文本容器之间，不会重叠，同时使该元素可滚动而不会使整个侧边栏滚动。

我目前的代码如下：

<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="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">
            主要内容
        </div>
    </div>
</div>

使用 Bootstrap 5.3.0 alpha1。

英文:

How would I align items in a sidebar like this:

See image

侧边栏中的垂直对齐

my main problems are the formatting for the footer being fixed to the bottom and the main sidebar container overflowing and scrolling but still being between the sidebar header and the sidebar bottom element text container, so not overlapping either while having that element be scrollable without the whole sidebar scrolling

what i have so far:

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;


&lt;div class=&quot;container-fluid&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-4 bg-dark text-white&quot; style=&quot;height: 100vh; width:250px;&quot;&gt;
            &lt;!-- &lt;div class=&quot;col bg-primary&quot;&gt;
                test
            &lt;/div&gt;

            &lt;div class=&quot;col bg-danger&quot;&gt;
                test 2
            &lt;/div&gt;

            &lt;div class=&quot;col bg-primary&quot; style=&quot;position: fixed; bottom: 0;&quot;&gt;
                test 3
            &lt;/div&gt; --&gt;

            &lt;div class=&quot;d-flex flex-column justify-content-start mb-3&quot;&gt;
                &lt;div class=&quot;p-2 bg-primary&quot;&gt;
                    Flex item 1
                &lt;/div&gt;

                &lt;div class=&quot;p-2 bg-danger flex-grow-1&quot;&gt;
                    Flex item 2
                &lt;/div&gt;
                &lt;div class=&quot;p-2 bg-primary&quot; style=&quot;position:fixed; bottom:0;&quot;&gt;
                    Flex item 3
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;col bg-secondary text-white&quot;&gt;
            main body
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col bg-secondary text-white&quot;&gt;
            main body
        &lt;/div&gt;
    &lt;/div&gt; --&gt;
&lt;/div&gt;

using bootstrap 5.3.0 alpha1

答案1

得分: 0

以下是如何使用Bootstrap V5.3创建具有容器的全页布局的最小示例，应该在溢出时滚动：

<nav>
  <!-- 导航栏内容 -->
</nav>

<main>
  <!-- 主体内容 -->
</main>

如果要使<main>在100vh高度上也能滚动，请添加以下CSS：

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

如果要允许<main>的高度超过视口高度，并且希望<nav>与其一起增长，请将col-4中的内容包装在绝对定位的容器中，该容器填充col-4，因此如果<main>较小，则可以超出100vh的高度，同时保持溢出滚动，例如：

<nav class="col-4 position-relative">
  <div id="overflow-container">
    <!-- 内容 -->
  </div>
</nav>

如果要在较小的屏幕尺寸上垂直堆叠<nav>和<main>，请在HTML中将.row默认设置为flex-column，并在中等断点上使用flex-md-row将其更改为flex行，并将col-4更改为col-md-4，并添加以下CSS媒体查询：

@media (min-width: 768px) {
  nav #overflow-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

请注意，上述示例基于具有绝对定位容器的示例，但相同的逻辑也可以应用于其他示例。

阅读有关flex-grow-1的更多信息或者如果您对flexbox不熟悉，请从这里开始。了解溢出是如何工作的。

英文:

Here's a minimal example of how to create a full page layout with a container that should scroll on overflow using Bootstrap V5.3.

Read the docs if you like to learn how it works.

Read about flex-grow-1 or if you're new to flex start here.
Learn how overflow works.

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

main {
 background: lightyellow;
}

&lt;html&gt;

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

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

If <main> should also overflow:scroll at 100vh.

Add in CSS:

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

and in HTML:

&lt;main class=&quot;col overflow-auto&quot;&gt;

If <main> can grow beyond the viewport height and you want <nav> to grow along with it.

You could wrap the content inside col-4 in an absolute positioned container that fills col-4 and therefore let it grow beyond 100vh height while keeping the overflow scroll if <main> is smaller, for example:

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

nav #overflow-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

main {
  background: lightyellow;
}

&lt;html&gt;

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

&lt;body&gt;
  &lt;div class=&quot;container-fluid px-0&quot;&gt;
    &lt;div class=&quot;row gx-0&quot;&gt;
      &lt;nav class=&quot;col-4 position-relative&quot;&gt;
        &lt;div class=&quot;p-2 d-flex flex-column gap-1&quot; id=&quot;overflow-container&quot;&gt;
          &lt;div class=&quot;&quot;&gt;
            &lt;h5&gt;
              Sidebar header
            &lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
            Some content
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
            Some other content
          &lt;/div&gt;
          &lt;div class=&quot;flex-grow-1 overflow-auto&quot;&gt;
            sidebar scroll
            &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; end sidebar scroll
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
            Sidebar footer
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;main class=&quot;col&quot;&gt;
        main body
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

If <nav> and <main> should stack vertically at a smaller screen size.

In the HTML make .row a flex-column by default and a flex row on the medium breakpoint with flex-md-row. Then change col-4 to col-md-4.

In the CSS add a media query, using Bootstrap's medium breakpoint width.

Note: Snippet below is based on the example above with an absolute positioned container, but the same logic can also be applied to the other examples.

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

main {
  background: lightyellow;
}

@media (min-width: 768px) {
  nav #overflow-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

&lt;html&gt;

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

&lt;body&gt;
  &lt;div class=&quot;container-fluid px-0&quot;&gt;
    &lt;div class=&quot;row gx-0 flex-column flex-md-row&quot;&gt;
      &lt;nav class=&quot;col-md-4 position-relative&quot;&gt;
        &lt;div class=&quot;p-2 d-flex flex-column gap-1&quot; id=&quot;overflow-container&quot;&gt;
          &lt;div class=&quot;&quot;&gt;
            &lt;h5&gt;
              Sidebar header
            &lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
            Some content
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
            Some other content
          &lt;/div&gt;
          &lt;div class=&quot;flex-grow-1 overflow-auto&quot;&gt;
            sidebar scroll
            &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; end sidebar scroll
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
            Sidebar footer
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;main class=&quot;col&quot;&gt;
        main body
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

侧边栏中的垂直对齐

问题

答案1

Why does the first image in this table only link part of the image to its hyperlink, but the second one works fine?

恐慌：打开模板/layout-main-page.html时出错：系统找不到指定的路径

停止在jQuery的slideToggle期间进行填充更改

Foundation Sticky | 元素应在视口顶部触及时粘附，而不是立即粘附

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论