Bootstrap карусель изображений под статической навигационной панели

Question

Мой сайт: http://cyrusjan.com/

При небольших экранах разрешения (мобильные устройства), мои карусельного изображения появляются под навигационной панели. Любые идеи о том, как держать их застрявшими под навигационной панелью? Также мое третье изображение меньше по сравнению с моими другими 2 изображениями. Как я могу удерживать нижний колонтитул под моей карусели, чтобы между ними не было лишнего пробела?

http://i.stack.imgur.com/lOTUd.png

Answer 1

Добавить смещение к вашему #myCarousel элемента:

#myCarousel { 
    position: relative; 
    margin-top: 51px; 
} 

Кроме того, ваш Navbar разрушается при ширине под 198px. Я бы установил минимальную ширину для вашего навигатора и тела, чтобы предотвратить это (но вы также можете использовать медиа-запрос, чтобы изменить свой стиль margin-top #myCarousel на 101px).

body { 
    min-width: 200px; 
} 

div.navbar { 
    min-width: 200px; 
} 

Что касается нижнего колонтитула, установите его положение относительно и снимите нижнюю часть: 0; стиль.

.footer { 
    position: relative; 
    width: 100%; 
    height: 70px; 
    background-color: #0072b1; 
} 

Что касается изображений, вы должны либо изменить их все быть последовательными или сделать их масштаб в контейнер.

Answer 2

Относительно ползунок погружаясь под воду навигационной панели, следует отметить, что в полном объеме, а также, это то же самое. Решение заключается в следующем:

#myCarousel { 
    margin-top:51px; 
} 

Относительно высоты 3-го изображения, размер (высота и ширина) ваших изображений 3 не являются одинаковыми. В гибком режиме ползунок будет изменять размер каждого изображения в соответствии с шириной. Это можно зафиксировать в настройках JavaScript для карусели или путем размещения изображений одинаковой ширины и высоты.