Bootstrap 4 dropdown menu не под кнопкой

405
23 ноября 2017, 01:40

Не могу понять как сделать вывод dropdown-menu не под кнопкой а под самим меню, чтобы ширина этого dropdown-menu была равна ширине основной строки дабы не происходило выхода 2-3 столбца dropdown-menu за экран как это можно наблюдать на примере ниже (лучше развернуть на весь экран)

для наглядности :

$('nav').on('mouseenter mouseleave','.dropdown',function(e){ 
  var _d=$(e.target).closest('.dropdown');_d.addClass('show'); 
  setTimeout(function(){ 
    _d[_d.is(':hover')?'addClass':'removeClass']('show'); 
  },300); 
});
.dropdown:hover>.dropdown-menu { 
  display: block; 
} 
 
.navbar { 
  background-color: #e0e0e0; 
 
} 
.navbar .navbar-brand { 
  color: #000000; 
} 
.navbar .navbar-brand:hover, 
.navbar .navbar-brand:focus { 
  color: #000000; 
} 
.navbar .navbar-text { 
  color: #000000; 
} 
.navbar .navbar-nav .nav-link { 
  color: #000000; 
  border-radius: .25rem; 
  margin: 0 0.25em; 
} 
.navbar .navbar-nav .nav-link:not(.disabled):hover, 
.navbar .navbar-nav .nav-link:not(.disabled):focus { 
  color: #000000; 
} 
.navbar .navbar-nav .dropdown-menu { 
  background-color: #e0e0e0; 
  border-color: #ffa500; 
} 
.navbar .navbar-nav .dropdown-menu .dropdown-item { 
  color: #000000; 
} 
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover, 
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus, 
.navbar .navbar-nav .dropdown-menu .dropdown-item.active { 
  color: #000000; 
  background-color: #ffa500; 
} 
.navbar .navbar-nav .dropdown-menu .dropdown-divider { 
  border-top-color: #ffa500; 
} 
.navbar .navbar-nav .nav-item.active .nav-link, 
.navbar .navbar-nav .nav-item.active .nav-link:hover, 
.navbar .navbar-nav .nav-item.active .nav-link:focus, 
.navbar .navbar-nav .nav-item.show .nav-link, 
.navbar .navbar-nav .nav-item.show .nav-link:hover, 
.navbar .navbar-nav .nav-item.show .nav-link:focus { 
  color: #000000; 
  background-color: #ffa500; 
} 
.navbar .navbar-toggle { 
  border-color: #ffa500; 
} 
.navbar .navbar-toggle:hover, 
.navbar .navbar-toggle:focus { 
  background-color: #ffa500; 
} 
.navbar .navbar-toggle .navbar-toggler-icon { 
  color: #000000; 
} 
.navbar .navbar-collapse, 
.navbar .navbar-form { 
  border-color: #000000; 
} 
.navbar .navbar-link { 
  color: #000000; 
} 
.navbar .navbar-link:hover { 
  color: #000000; 
} 
 
.dropdown-menu{ 
	column-count: 3; 
	position: absolute; 
} 
 
.dropdown-menu a { 
	display: block; 
} 
 
 
 
@media (max-width: 575px) { 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
@media (max-width: 767px) { 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
 
} 
 
@media (max-width: 991px) { 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
@media (max-width: 1199px) { 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { 
  color: #000000; 
} 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
  color: #000000; 
} 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { 
  color: #000000; 
  background-color: #ffa500; 
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
    <nav class="navbar navbar-expand-md  sticky-top"> 
 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span> 
          </button> 
      <div class="container"> 
        <ul class="navbar-nav mr-auto"> 
 
 
 
          <li class="nav-item dropdown"> 
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1234</a> 
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
              <a class="dropdown-item" href="#">Action</a> 
              <a class="dropdown-item" href="#">Another action</a> 
              <a class="dropdown-item" href="#">Something else here</a> 
            </div> 
          </li> 
 
 
          <li class="nav-item dropdown  "> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
</li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
</li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
</li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
</li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
</li> 
<li class="nav-item dropdown  mx-auto"> 
            <a class="nav-link" href="#">Контакты</a> 
          </li> 
<li class="nav-item dropdown"> 
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1234</a> 
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
              <a class="dropdown-item" href="#">Action</a> 
              <a class="dropdown-item" href="#">Another action</a> 
              <a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
<a class="dropdown-item" href="#">Something else here</a> 
            </div> 
          </li> 
        </ul> 
 
      </div> 
    </nav>

Answer 1

Добавить в CSS:

.sticky-top ul {
  position: relative;
}
.sticky-top ul>li {
  position: static;
}
.sticky-top ul>li .dropdown-menu {
  width: 100%;    
}


$('nav').on('mouseenter mouseleave', '.dropdown', function(e) { 
  var _d = $(e.target).closest('.dropdown'); 
  _d.addClass('show'); 
  setTimeout(function() { 
    _d[_d.is(':hover') ? 'addClass' : 'removeClass']('show'); 
  }, 300); 
});
.dropdown:hover>.dropdown-menu { 
  display: block; 
} 
 
.navbar { 
  background-color: #e0e0e0; 
} 
 
.navbar .navbar-brand { 
  color: #000000; 
} 
 
.navbar .navbar-brand:hover, 
.navbar .navbar-brand:focus { 
  color: #000000; 
} 
 
.navbar .navbar-text { 
  color: #000000; 
} 
 
.navbar .navbar-nav .nav-link { 
  color: #000000; 
  border-radius: .25rem; 
  margin: 0 0.25em; 
} 
 
.navbar .navbar-nav .nav-link:not(.disabled):hover, 
.navbar .navbar-nav .nav-link:not(.disabled):focus { 
  color: #000000; 
} 
 
.navbar .navbar-nav .dropdown-menu { 
  background-color: #e0e0e0; 
  border-color: #ffa500; 
} 
 
.navbar .navbar-nav .dropdown-menu .dropdown-item { 
  color: #000000; 
} 
 
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover, 
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus, 
.navbar .navbar-nav .dropdown-menu .dropdown-item.active { 
  color: #000000; 
  background-color: #ffa500; 
} 
 
.navbar .navbar-nav .dropdown-menu .dropdown-divider { 
  border-top-color: #ffa500; 
} 
 
.navbar .navbar-nav .nav-item.active .nav-link, 
.navbar .navbar-nav .nav-item.active .nav-link:hover, 
.navbar .navbar-nav .nav-item.active .nav-link:focus, 
.navbar .navbar-nav .nav-item.show .nav-link, 
.navbar .navbar-nav .nav-item.show .nav-link:hover, 
.navbar .navbar-nav .nav-item.show .nav-link:focus { 
  color: #000000; 
  background-color: #ffa500; 
} 
 
.navbar .navbar-toggle { 
  border-color: #ffa500; 
} 
 
.navbar .navbar-toggle:hover, 
.navbar .navbar-toggle:focus { 
  background-color: #ffa500; 
} 
 
.navbar .navbar-toggle .navbar-toggler-icon { 
  color: #000000; 
} 
 
.navbar .navbar-collapse, 
.navbar .navbar-form { 
  border-color: #000000; 
} 
 
.navbar .navbar-link { 
  color: #000000; 
} 
 
.navbar .navbar-link:hover { 
  color: #000000; 
} 
 
.dropdown-menu { 
  column-count: 3; 
  position: absolute; 
} 
 
.dropdown-menu a { 
  display: block; 
} 
 
@media (max-width: 575px) { 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
@media (max-width: 767px) { 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
@media (max-width: 991px) { 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
@media (max-width: 1199px) { 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { 
    color: #000000; 
  } 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
    color: #000000; 
  } 
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { 
    color: #000000; 
    background-color: #ffa500; 
  } 
} 
 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { 
  color: #000000; 
} 
 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { 
  color: #000000; 
} 
 
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { 
  color: #000000; 
  background-color: #ffa500; 
} 
 
/*Добавить*/ 
.sticky-top ul { 
  position: relative; 
} 
 
.sticky-top ul>li { 
  position: static; 
} 
 
.sticky-top ul>li .dropdown-menu { 
  width: 100%; 
  top: 60px;/*Добавил чтобы не слитало появление dropbox 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-expand-md  sticky-top"> 
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
  </button> 
  <div class="container"> 
    <ul class="navbar-nav mr-auto"> 
 
 
 
      <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1234</a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
          <a class="dropdown-item" href="#">Action</a> 
          <a class="dropdown-item" href="#">Another action</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
      </li> 
 
 
      <li class="nav-item dropdown  "> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      </li> 
      <li class="nav-item dropdown  mx-auto"> 
        <a class="nav-link" href="#">Контакты</a> 
      </li> 
      <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1234</a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
          <a class="dropdown-item" href="#">Action</a> 
          <a class="dropdown-item" href="#">Another action</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
      </li> 
    </ul> 
 
  </div> 
</nav>

READ ALSO
Тег в атрибуте (alt=&ldquo;html tag&rdquo;)
CSS

Тег в атрибуте (alt=“html tag”)

У меня есть вопрос по HTML

 239
Как задать медиа-запрос для процентного масштабирования?
CSS

Как задать медиа-запрос для процентного масштабирования?

Как задать медиа-запрос для масштабирования? На масштабе окна браузера 90% едет заголовокКак узнать, какова ширина экрана на 90% (и так далее),...

 238
Как задать два background?
CSS

Как задать два background?

Привет подскажите пожалуйста такой кодИменно код ибо суть я знаю а вот код неправильно пишу

 349
Тест на скорость загрузки сайта
CSS

Тест на скорость загрузки сайта

Похожие вопросы уже искал, ответа не нашел

 280