Как сделать ширину выпадающего меню равной ширине его родителя в начальной загрузке 4 - PullRequest
Новая
       13

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

0 голосов
/ 09 сентября 2018

Я создаю раскрывающийся список в начальной загрузке 4. Я поместил раскрывающееся меню и раскрывающееся меню в элементе div с class = "container" Я хочу, чтобы выпадающее меню и раскрывающееся меню занимали всю ширину родительского элемента. Я написал этот код для этого 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown">
      dropdown
    </button>
    <div class="dropdown-menu">
      <a href="" class="dropdown-item">one</a>
      <a href="" class="dropdown-item">two</a>
      <a href="" class="dropdown-item">three</a>
      <a href="" class="dropdown-item">four</a>
    </div>
    <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

Кнопка-выпадающий переключатель занимает всю ширину родительского элемента div. Но, когда я нажал на кнопку выпадающего переключателя, я заметил, что выпадающее меню не занимает всю ширину. Я хочу, чтобы ширина выпадающего меню была равна ширине родительского элемента. Как я могу это сделать? (я пытался использовать width: наследовать; свойство, но оно не работало должным образом)

Ответы [ 4 ]

0 голосов
/ 09 сентября 2018
Выпадающее меню

имеет свойство position:absolute. Таким образом, добавление width:100%; заставит выпадающее меню занимать всю ширину страницы вместо полной ширины контейнера. Чтобы сделать выпадающее меню шириной родительского элемента, установите относительное расположение родительского элемента. Для решения проблемы сначала добавьте атрибут class="position-relative" в родительский элемент выпадающего меню. Теперь добавьте w-100 к атрибуту класса в выпадающем меню div. 

<div class="container position-relative">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
  dropdown
</button>
<div class="dropdown-menu w-100">
  <a href="" class="dropdown-item">one</a>
  <a href="" class="dropdown-item">two</a>
  <a href="" class="dropdown-item">three</a>
  <a href="" class="dropdown-item">four</a>
</div>
0 голосов
/ 09 сентября 2018

Вы можете добавить min-width: 100% к классу dropdown-menu

0 голосов
/ 09 сентября 2018

Вам не нужен дополнительный CSS. Просто используйте опцию display="static" и класс w-100 и position-static в раскрывающемся списке, чтобы он занимал 100% родительской ширины. 

<div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown" data-display="static">
        dropdown
    </button>
    <div class="dropdown-menu position-static w-100">
        <a href="" class="dropdown-item">one</a>
        <a href="" class="dropdown-item">two</a>
        <a href="" class="dropdown-item">three</a>
        <a href="" class="dropdown-item">four</a>
    </div>
</div>

https://www.codeply.com/go/5GjATutCBb

Также см .: Как сделать выпадающий полный набор Bootstrap 4 в Navbar?

0 голосов
/ 09 сентября 2018

Просто добавьте подписку css classs

  .dropdown-menu-width {
      width: 689px !important //your required width
    }

И html фрагмент, как показано ниже 

<div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown">
      dropdown
    </button>
    <div class="dropdown-menu dropdown-menu-width">
      <a href="" class="dropdown-item">one</a>
      <a href="" class="dropdown-item">two</a>
      <a href="" class="dropdown-item">three</a>
      <a href="" class="dropdown-item">four</a>
    </div>
</div>

Предварительный просмотр

Надеюсь, это решит вашу проблему !!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...