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

Let .navbar-wrapper flow in Carousel example

Browse Source 
A .navbar-wrapper followed by a .carousel works well in this example,
but when the navbar is not followed by a carousel, content flows
underneath the navbar because it is absolutely positioned.

Letting .navbar-wrapper be part of the flow and moving the negative
margin to the .carousel to bring it underneath the navbar makes these
example styles suitable for pages without carousels.
This commit is contained in:
Ross Allen 2013-07-18 14:57:27 -07:00
parent 0a1c46a12c
commit 1a2ef331fd
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
carousel/example.css
View File

@ -15,10 +15,6 @@ body {
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
@ -30,6 +26,9 @@ body {
/* Carousel base class */
.carousel {
margin-bottom: 60px;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
margin-top: -90px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
@ -119,7 +118,6 @@ body {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
@ -133,4 +131,4 @@ body {
line-height: 1.4;
}
}
}