Fixes #9928 and #9932: carousel example in IE10

* Use absolute positioning instead to remove navbar from flow of
document
* No more negative margin fu
* Flip around padding between container and navbar for proper display
in xs and sm viewports
This commit is contained in:
Mark Otto 2013-08-27 09:10:06 -07:00
parent c84374f9de
commit 4f28fdd227
1 changed files with 24 additions and 4 deletions

View File

@ -14,20 +14,31 @@ body {
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: relative;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
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 {
@ -103,6 +114,15 @@ body {
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-left: 15px;
padding-right: 15px;
}
.navbar-wrapper .navbar {
padding-left: 0;
padding-right: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;