1

Необходимо выпадающее меню dropdown растянуть на всю ширину экрана.

Сделала так:

.nav > li.dropdown.show {
 position: static;
}

.nav > li.dropdown.show .dropdown-menu { 

  width: 100%;
  text-align: center;
  left: 0;
   right: 0;
 }

.dropdown-menu > li {
 display: table-cell;
 height: 5rem;
line-height: 5rem;

}

@media screen and (max-width: 767px) {
 .dropdown-menu > li {
display: block;
}
}

К сожалению в fiddle не отобразилось, но выпадающее меню растянулось на ширину container, а не на ширину экрана.

Как растянуть dropdown на всю ширину экрана?

0

1 ответ 1

0

Если я вас правильно понял, то .nav > li.dropdown.show .dropdown-menu замените следующим:

li.dropdown.show > .dropdown-menu { 
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
  top: auto ;
  position: fixed;
}

Протестить ваш вариант можно здесь

3
  • выглядит почти как требуется, но position: fixed !important; не подходит. почему width: 100%; не работает?
    – siberian
    6 апр 2017 в 6:47
  • width: 100% работает, заменил.
    – MihailPw
    6 апр 2017 в 6:50
  • но почему без position: fixed; не работает... я применила это codepen.io/danielmdesigns/pen/QbgYKa, но не сработало как надо
    – siberian
    6 апр 2017 в 6:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.