mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-15 11:59:39 +03:00
Code Activity

Fix sidebar examples height

Browse Source 
Adds .`min-vh-100` to each sidebar to ensure it occupies the entire height. Fwiw, only Chrome seemed to exhibit an issue here as Safari looked fine for me.

Fixes #35668
This commit is contained in:
Mark Otto
2022-02-16 12:13:25 -08:00
parent 63f75bccd8
commit 7f6bb5e946
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/examples/sidebars/index.html
+5 -5
View File
@@ -70,7 +70,7 @@ body_class: ""
<main>
<h1 class="visually-hidden">Sidebars examples</h1>
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
<div class="d-flex flex-column flex-shrink-0 min-vh-100 p-3 text-white bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
@@ -126,7 +126,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
<div class="d-flex flex-column flex-shrink-0 min-vh-100 p-3 bg-light" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
@@ -182,7 +182,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
<div class="d-flex flex-column flex-shrink-0 min-vh-100 bg-light" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span>
@@ -230,7 +230,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
<div class="flex-shrink-0 min-vh-100 p-3 bg-white" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span>
@@ -293,7 +293,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
<div class="d-flex flex-column align-items-stretch flex-shrink-0 min-vh-100 bg-white" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span>