2013-12-06 7 views
1

Я новичок в Bootstrap, и у меня есть вопрос о карусели. Мне нужно установить высоту 700 пикселей на большие экраны (шт.) И высоту 500 пикселей для мобильных телефонов. Как мне это сделать? Я положил это:Bootstrap carousel adjust height

@media (min-width: 320px){ 
    .carousel-caption p { 
    margin-bottom: 20px; 
    font-size: 20px; 
    line-height: 1.4; 
    } 
    .carousel { 
    height: 500px; 
    margin-bottom: 60px; 
    } 

    .carousel .item { 
    height: 500px; 
    background-color: #777; 
    } 
    .carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
    } 

} 

Жду ответа.

Спасибо!

ответ

0

Я не могу проверить его правильно знать, но если вы хотите иметь высоту 500 пикселей в устройствах с шириной меньше 320 пикселей, вы должны запросить медиа-запрос @media (max-height:320px) вместо @media (min-width:320px).

EDIT:

Я проверил это и так работает:

@media (max-width:320px){ 
    .carousel{ 
    height:50px; 
    } 
} 

таким образом из резолюций, которые имеют ширину от 0 до 320, то .carousel класса будет иметь 50px высоту.

Если это решит вашу проблему, не забудьте проголосовать и выберите этот ответ :)

+0

Спасибо за ответ! Я тестировал это, но я думаю, что я ошибаюсь, потому что не знаю, как я должен использовать медиа-опрос. Например, я использую '@media (max-height: 320px) {... code 1 ...} @media (min-height: 760px) {... code 2 ...} и из медиа-querie Я помещаю код 1 с другими значениями высоты (это понятно?) Если вы меня не понимаете, я стараюсь быть более ясным! – Microsource

+0

Я не знаю, понимаю ли вы вас, но я тоже ошибся. Это максимальная ширина: 320 пикселей (ширина разрешения), и когда у вас есть такая ширина или меньше, вы хотите, чтобы карусель имела высоту: 500 пикселей. Попробуйте этот путь, пожалуйста. Если это не работает, попробуйте использовать max-height: 500px; – luidgi27

+0

См. Мои правки, пожалуйста! – luidgi27