mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
mo betta sidenav for responsive hotness
This commit is contained in:
parent
beb2c13f4d
commit
3e40e7dfbf
3 changed files with 32 additions and 10 deletions
|
@ -160,11 +160,20 @@ section > ul li {
|
|||
/* Sidenav
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Base styles are not affixable given mobile-first */
|
||||
.bs-docs-sidenav {
|
||||
width: 218px;
|
||||
margin: 20px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Chevrons */
|
||||
.bs-docs-sidenav.affix {
|
||||
position: static;
|
||||
width: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Chevrons within each link */
|
||||
.bs-docs-sidenav .glyphicon-chevron-right {
|
||||
float: right;
|
||||
margin-top: 1px;
|
||||
|
@ -180,17 +189,30 @@ section > ul li {
|
|||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
.bs-docs-sidenav.affix {
|
||||
top: 10px;
|
||||
|
||||
/* Affix all the things, and set widths because they're positioned, depending on viewport size */
|
||||
@media screen and (min-width: 768px) {
|
||||
.bs-docs-sidenav.affix {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
width: 170px;
|
||||
}
|
||||
.bs-docs-sidenav.affix-bottom {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 270px;
|
||||
}
|
||||
}
|
||||
.bs-docs-sidenav.affix-bottom {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 270px;
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.bs-docs-sidenav.affix {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Bootstrap code examples
|
||||
-------------------------------------------------- */
|
||||
|
||||
|
|
|
@ -91,7 +91,7 @@
|
|||
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
|
||||
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
|
||||
<li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
|
||||
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li>
|
||||
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li>
|
||||
<li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
2
docs/templates/pages/css.mustache
vendored
2
docs/templates/pages/css.mustache
vendored
|
@ -23,7 +23,7 @@
|
|||
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
|
||||
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
|
||||
<li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
|
||||
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li>
|
||||
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li>
|
||||
<li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue