Bootstrap 3 выпадающие выпадающие из панели навигации - PullRequest
Новая
       6

Bootstrap 3 выпадающие выпадающие из панели навигации

0 голосов
/ 28 апреля 2018

У меня есть навигационная панель:

Navbar

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

Это работает без проблем со следующим кодом: 

<div class="header-container-nav-master hidden-xs hidden-sm">
<ul class="header-navigator container">
    <div class="col-xs-12">
 <li class="dropdown"><div class="dropdown show">
    <a href="..." class="nav-sub dropdown-toggle" data-ref="71" role="button" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">Item</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <ul>
    <li><strong>Subheading</strong></li>
    <li class="brandsofcat"><a class="dropdown-item" href="#"></a></li>
    </ul></div>
  </div>
</li>
....
<li>...</li>
....
 </div>
</ul>

Мой CSS выглядит так: 

.header-container-nav-master {
 width: 100%;
 background-color:#fff;
 height:52px;
 padding:0px 18px;
 border-bottom: 1px solid #e5e5e5;
 border-top: 1px solid #e5e5e5;
 white-space: nowrap;
 overflow-x: scroll;
 overflow-y: visible;}

 .header-container-nav-master ul {
 height:100%;
 padding:0;
 display: flex;
 align-items: center;}

 .header-container-nav-master ul li {
 font-size: 12px;
 letter-spacing: 0.75px;
 padding-right: 22px;
 color: #1f1f1f!important;
 display: inline-block;
 list-style:none;}

Как показано в примере на рисунке, у меня проблема в том, что выпадающие списки вырезаны из следующего контейнера.

Кто-нибудь знает, как решить эту проблему?

1 Ответ

0 голосов
/ 28 апреля 2018

В этом случае проблема заключается в overflow-x: scroll;, который есть в вашем CSS.

Взял код, который вы дали здесь, и поместил его в codepen.

Взгляните на это и посмотрите комментарии в блоке CSS: https://codepen.io/anon/pen/WJRwOx

Чтобы избежать разбиения меню на 2+ строки, вам нужно вызвать более быстрое свертывание меню Bootstrap (то есть превратиться в мобильное меню). Это связано с тем, что боковая прокручиваемая навигационная панель не очень удобна для пользователя и вызывает проблемы со стилем.

Кроме того, я вижу, что у вас есть <div class="col-xs-12"> как прямое дитя вашего <ul class="header-navigator container">. Насколько я знаю, вам не следует вкладывать div в элементы ul в HTML5, так как некоторые браузеры могут автоматически закрывать родительский элемент ul.

Надеюсь, это поможет!

...