Bootstrap Отзывчивая карусель не изменяется правильно

Question

Я использую Bootstrap, и у меня есть карусель под моим навигатором.

Это нормально работает на обычных компьютерах, проверьте this link.

Однако у меня возникают проблемы с меньшими экранами, например. iPhone. Просто измените размер экрана своего браузера, чтобы понять, что я имею в виду.

Я полагаю, что, возможно, не нужен отзывчивый CSS, но что-то еще я делаю неправильно. Возможно, это лучшие способы получить изображение карусели с изменением размера на каждом экране.

Кроме того, я хотел бы, чтобы карусель имела высоту экрана 100%, поэтому карусель охватывает весь экран, а остальная часть содержимого отображается только при прокрутке.

CSS Я использую:

 /* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    margin-top: -80px; 
    position: fixed; 
    width: 100%; 
} 

.carousel .container { 
    position:relative; 
    z-index: 9; 
}  

.carousel-control { 
    height: 80px; 
    margin-top: 0; 
    font-size: 120px; 
    text-shadow: 0 1px 1px rgba(0,0,0,.4); 
    background-color: transparent; 
    border: 0; 
    z-index: 10; 
} 

.carousel .item { 
    min-height: 800px; 
} 

.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: auto; 
    margin-top: -200px; 
} 

.carousel-caption { 
    background-color: transparent; 
    position: static; 
    max-width: 550px; 
    padding: 0 20px; 
    margin-top: 200px; 
} 

.carousel-caption2 { 
    background-color: transparent; 
    position: static; 
    max-width: 380px; 
    padding: 200px 20px; 
} 

.carousel-caption h1, 
.carousel-caption .lead, 
.carousel-caption2 h1, 
.carousel-caption2 .lead { 
    margin: 0; 
    line-height: 1.25; 
    color: #fff; 
    text-shadow: 0 1px 1px rgba(0,0,0,.4); 
} 
.carousel-caption .btn, 
.carousel-caption2 .btn { 
    margin-top: 10px; 
} 

#wrapper-container { 
margin-bottom: -80px; 
padding-bottom: 80px; 
position: relative; 
background: inherit; 
top: 60%; 
} 

/* Featurettes 
------------------------- */ 

.featurette-divider { 
    margin: 80px 0; /* Space out the Bootstrap <hr> more */ 
} 
.featurette { 
    padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ 
    overflow: hidden; /* Vertically center images part 2: clear their floats. */ 
} 
.featurette-image { 
    margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ 
} 

/* Give some space on the sides of the floated elements so text doesn't run right into it. */ 
.featurette-image.pull-left { 
    margin-right: 40px; 
} 
.featurette-image.pull-right { 
    margin-left: 40px; 
} 

/* Thin out the marketing headings */ 
.featurette-heading { 
    font-size: 50px; 
    font-weight: 300; 
    line-height: 1; 
    letter-spacing: -1px; 
} 



/* RESPONSIVE CSS 
-------------------------------------------------- */ 

@media (max-width: 979px) { 

    .container.navbar-wrapper { 
    margin-bottom: 0; 
    width: auto; 
    } 
    .navbar-inner { 
    border-radius: 0; 
    } 

    .carousel .item { 
    min-height: 500px; 
    } 

    .carousel img { 
    min-width: 100%; 
    height: auto; 
    } 

    .featurette { 
    height: auto; 
    padding: 0; 
    } 
    .featurette-image.pull-left, 
    .featurette-image.pull-right { 
    display: block; 
    float: none; 
    max-width: 40%; 
    margin: 0 auto 20px; 
    } 
} 

@media (max-width: 767px) { 

    .navbar-inner { 
    margin: -20px; 
    } 

    .carousel { 
    margin-left: -20px; 
    margin-right: -20px; 
    } 
    .carousel .container { 

    } 
    .carousel .item { 
    height: 300px; 
    } 
    .carousel img { 
    height: 300px; 
    } 
    .carousel-caption { 
    width: 65%; 
    padding: 0 70px; 
    margin-top: 100px; 
    } 
    .carousel-caption h1 { 
    font-size: 30px; 
    } 
    .carousel-caption .lead, 
    .carousel-caption .btn { 
    font-size: 18px; 
    } 

    .marketing .span4 + .span4 { 
    margin-top: 40px; 
    } 

    .featurette-heading { 
    font-size: 30px; 
    } 
    .featurette .lead { 
    font-size: 18px; 
    line-height: 1.5; 
    } 

} 

Answer 1

Для начала, чтобы избавиться от разницы-топ: -200px; на ваш стиль .corousel img. С маленьким экраном высота изображения меньше 200 пикселей, и это заставляет его уходить с экрана.

Answer 2

Существует много всего, что нужно сделать, чтобы очистить его ... Следующее поможет вам начать работу, но определенно будет немного больше настроек.

Я не смотрел CSS, чтобы заполнить экран изображением в соответствии с вашим последним запросом. Я думаю, вам нужно будет рассмотреть возможность добавления другой карусели с другими обрезанными изображениями с соотношением сторон портрета, если вы этого хотите, поэтому вы показываете определенную часть изображения, которое вы хотите.

Во-первых под @media (max-width: 767px), удалить:

.navbar-inner { 
    margin: -20px; 
    } 

Это вызывает ваше меню в верхней части, чтобы сдвинуть вверх из виду.

От @media... .carousel, удалить:

margin-left: -20px; 
margin-right: -20px; 

Это грязно, и там из-за заполнение добавляется к телу (смотри ниже).

Добавьте следующие @media (max-width... .carousel:

position: relative; 
margin-top: 0px; 

Потому что вы хотите карусель сидеть аккуратно под навигационной панели.

Снимите следующий из @media... body

padding-right: 20px; 
padding-left: 20px; 

Это вызывает проблемы для карусели, и вы можете добавить отступы для конкретных див, как wrapper-container, если вы хотите.

От .carousel img, удалить:

margin-top: -200px; 

Далее, вы должны зафиксировать факт, что текст под каруселью перемещается вниз:

Добавьте следующие @media... #wrapper-container

top: 0; 

Удалить из @media (max-width: 979px)

.carousel .item { 
    min-height: 500px; 
} 

и вытекающее из @media (max-width: 767px)

.carousel img { 
    height: 300px; 
} 

потому что карусель далеко не такой высоты на смартфон размеров.

Вам также нужно будет поиграть с позиционированием текста подписи в CSS @media. Вы можете захотеть потерять текст подписи, поскольку карусель сжимается.

Это поможет вам начать работу, и вы можете идти оттуда ...