Вертикальное многоуровневое меню bootstrap: Как сделать многоуровневое меню на Bootstrap? — Хабр Q&A

Leave a Comment / Разное / By /

css — Bootstrap сворачивает меню навигации по вертикали после центрирования элементов

Задавать вопрос

спросил

Изменено 6 лет, 9 месяцев назад

Просмотрено 3к раз

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

Вот что у меня есть на данный момент:

 

<навигация>
    <дел>
        <дел>
            <дел>
                

            <дел>
                <ул>
                    
  • 
                        
                    
    • 
                    
  • 
                        ссылка
                    
    • 
                    
  • 
                        ссылка
                    
    • 
                    
  • 
                        ссылка
                    
    • 
                    
  • 
                        ссылка
                    
    • 
                    
  • 
                        ссылка
                    
    •

    и важный css:

     . center .nav,
 .center .nav > ли
{
    поплавок: нет;
    дисплей: встроенный блок;
    /*дисплей: встроенный; /* исправление ie7 */
    /*увеличение:1; /* триггер hasLayout ie7 */
    вертикальное выравнивание: сверху;
}
.center .navbar-внутренний {
    выравнивание текста: по центру;
}
.center .dropdown-меню {
    выравнивание текста: по левому краю;
}

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

    • css
    • twitter-bootstrap
    • панель навигации

    1

    Просто примените правила внутри медиа-запроса:

     @media (min-width: 767px) {
   ВАШИ ПРАВИЛА ЗДЕСЬ
}

    См. фрагмент рабочего примера.

     @media (минимальная ширина: 767 пикселей) {
  .центр .нав,
  .центр .nav > ли {
    поплавок: нет;
    отображение: встроенный блок;
    вертикальное выравнивание: сверху;
  }
  .center .navbar-внутренний {
    выравнивание текста: по центру;
  }
  .center .dropdown-меню {
    выравнивание текста: по левому краю;
  }
} 
       

<дел>
  <навигация>
    <дел>
      <дел>

        <дел>