rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

make it big screen friendly

Browse Source
This commit is contained in:
Mark Otto 2017-05-27 18:24:00 -07:00
parent 8627c506f7
commit 5b66579e4d
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_layouts/docs.html
View File

@ -13,11 +13,11 @@
{% include nav-home.html %} {% include nav-home.html %}
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
{% include nav-docs.html %} {% include nav-docs.html %}
</div> </div>
<main class="col-12 col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-auto py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">{{ page.title }}</h1> <h1 class="bd-title" id="content">{{ page.title }}</h1>
<p class="bd-lead">{{ page.description }}</p> <p class="bd-lead">{{ page.description }}</p>
{% include ads.html %} {% include ads.html %}

7
docs/assets/scss/_content.scss
View File

@ -6,6 +6,7 @@
.bd-content { .bd-content {
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
max-width: calc(100% - 320px);
padding-right: 20%; padding-right: 20%;
#contents { #contents {
@ -24,6 +25,12 @@
} }
} }
@media (min-width: 2000px) {
#markdown-toc {
padding-left: 6rem;
}
}
// Hack the sticky header // Hack the sticky header
h2[id], h2[id],
h3[id] { h3[id] {

1
docs/assets/scss/_sidebar.scss
View File

@ -12,6 +12,7 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
position: sticky; position: sticky;
top: 4rem; top: 4rem;
max-width: 320px;
max-height: calc(100vh - 4rem); max-height: calc(100vh - 4rem);
overflow-y: auto; overflow-y: auto;
} }