mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

navbar positioning

Browse Source
This commit is contained in:
Mark Otto
2015-08-18 01:18:21 -07:00
parent 4c7e4e4454
commit ff72ea6b81
4 changed files with 36 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/css/docs.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/css/docs.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/scss/_component-examples.scss
+13 -40
View File
@@ -113,12 +113,6 @@
} }
} }
// Tweak content of examples for optimum awesome
.bd-example > *:last-child,
.bd-example > .table-responsive:last-child > .table {
margin-bottom: 0 !important;
}
.bd-example > .close { .bd-example > .close {
float: none; float: none;
} }
@@ -183,44 +177,23 @@
} }
// Navbars // Navbars
.bd-example .navbar:last-child { .bd-example {
margin-bottom: 0; .navbar-fixed-top {
position: static;
margin: -1rem -1rem 1rem;
} }
.bd-navbar-top-example, .navbar-fixed-bottom {
.bd-navbar-bottom-example { position: static;
z-index: 1; margin: 1rem -1rem -1rem;
padding: 0;
overflow: hidden; // cut the drop shadows off
} }
.bd-navbar-top-example .navbar-header,
.bd-navbar-bottom-example .navbar-header { @include media-breakpoint-up(sm) {
margin-left: 0; .navbar-fixed-top {
margin: -1.5rem -1.5rem 1rem;
} }
.bd-navbar-top-example .navbar-fixed-top, .navbar-fixed-bottom {
.bd-navbar-bottom-example .navbar-fixed-bottom { margin: 1rem -1.5rem -1.5rem;
position: relative;
margin-right: 0;
margin-left: 0;
} }
.bd-navbar-top-example {
padding-bottom: 45px;
}
.bd-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bd-navbar-bottom-example {
padding-top: 45px;
}
.bd-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bd-navbar-bottom-example .navbar {
margin-bottom: 0;
}
@media (min-width: 768px) {
.bd-navbar-top-example .navbar-fixed-top,
.bd-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
} }
} }
docs/components/navbar.md
+17
View File
@@ -162,6 +162,23 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
</nav> </nav>
{% endexample %} {% endexample %}
## Placement
Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
{% example html %}
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
{% endexample %}
## Collapsible content ## Collapsible content
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content. Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.