侧边栏中的垂直对齐

huangapple go评论61阅读模式
英文:

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

main {
 background: lightyellow;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

If &lt;main&gt; 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 &lt;main&gt; can grow beyond the viewport height and you want &lt;nav&gt; 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 &lt;main&gt; is smaller, for example:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

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

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

main {
  background: lightyellow;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

If &lt;nav&gt; and &lt;main&gt; 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.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

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;
  }
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 12:29:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75053198.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定