rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Update Sidebars example to fix dividers and rendering on Chrome (#33859)

Browse Source
This commit is contained in:
Mark Otto 2021-05-12 21:34:34 -07:00 committed by GitHub
parent 3464d3caa2
commit d80cb2241d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
site/content/docs/5.0/examples/sidebars/index.html
View File

@ -70,7 +70,7 @@ body_class: ""
<main> <main>
<h1 class="visually-hidden">Sidebars examples</h1> <h1 class="visually-hidden">Sidebars examples</h1>
<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 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"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
@ -126,7 +126,7 @@ body_class: ""
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 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"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
@ -182,7 +182,7 @@ body_class: ""
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="d-flex flex-column bg-light" style="width: 4.5rem;"> <div class="d-flex flex-column flex-shrink-0 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"> <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" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span> <span class="visually-hidden">Icon-only</span>
@ -230,7 +230,7 @@ body_class: ""
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="p-3 bg-white" style="width: 280px;"> <div class="flex-shrink-0 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"> <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span> <span class="fs-5 fw-semibold">Collapsible</span>
@ -293,7 +293,7 @@ body_class: ""
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> <div class="d-flex flex-column align-items-stretch flex-shrink-0 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"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span> <span class="fs-5 fw-semibold">List group</span>

17
site/content/docs/5.0/examples/sidebars/sidebars.css
View File

@ -1,19 +1,26 @@
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
main { main {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 100vh; height: 100vh;
height: -webkit-fill-available; height: -webkit-fill-available;
max-height: 100vh;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
} }
main > * {
flex-shrink: 0;
min-height: -webkit-fill-available;
}
.b-example-divider { .b-example-divider {
flex-shrink: 0;
width: 1.5rem; width: 1.5rem;
height: 100%; height: 100vh;
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15); border: solid rgba(0, 0, 0, .15);
border-width: 1px 0; border-width: 1px 0;