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

Fixes #9928 and #9932: carousel example in IE10

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
examples/carousel/carousel.css
View File

@ -14,20 +14,31 @@ body {
/* Special class on .container surrounding .navbar, used for positioning it into place. */ /* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { .navbar-wrapper {
position: relative; position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20; 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 /* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */ -------------------------------------------------- */
/* Carousel base class */ /* Carousel base class */
.carousel { .carousel {
height: 500px;
margin-bottom: 60px; 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 */ /* Since positioning the image, we need to help out the caption */
.carousel-caption { .carousel-caption {
@ -103,6 +114,15 @@ body {
.navbar-wrapper { .navbar-wrapper {
margin-top: 20px; 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 */ /* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar { .navbar-wrapper .navbar {
border-radius: 4px; border-radius: 4px;