Bootstrap Выпадающая кнопка меняет положение

Question

Я следил за документацией, найденной здесь: https://getbootstrap.com/docs/4.1/components/dropdowns/ и добавил следующую выпадающую кнопку:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
</div>

Проблема, с которой я столкнулся, заключается в том, что при нажатии кнопки чтобы отобразить выпадающее меню, кнопка меняет свое положение. Это происходит с обоими выпадающими кнопками, которые у меня есть.

Кнопки без выпадающего списка нажаты

Выпадающие кнопки нажаты и кнопка измененного положения Пример 1

Раскрывающийся список с нажатой кнопкой мыши и пример изменения положения кнопки 2

Вы можете см. пример кода этой проблемы: https://codepen.io/danfuentes/pen/MWaYOgz

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

Answer 1

Окружите свои элементы в родительском элементе div с помощью класса btn-grp следующим образом:

<div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>

Answer 2

Вам нужно будет предоставить HTML, который окружает элемент кнопки, вместе с css для всех этих элементов.

Можете ли вы обновить свой вопрос этой информацией, чтобы мы могли видеть, что происходит кроме тега кнопки?

Обновление после просмотра codepen:

У вас было несколько тегов div в неправильном месте, пожалуйста, смотрите решение ниже:

 <div class="btn-group">
 <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <a class="dropdown-item" href="#">Dropdown tesdt</a>
      <a class="dropdown-item" href="#">Dropdown 2</a>
      <a class="dropdown-item" href="#">Dropdown 3</a>
      <a class="dropdown-item" href="#">Dropdown 4</a>
      <a class="dropdown-item" href="#">Dropdown 5</a>
    </div>
</div>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 2</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <a class="dropdown-item" href="#">Dropdown 1</a>
      <a class="dropdown-item" href="#">Dropdown 2</a>
      <a class="dropdown-item" href="#">Dropdown 3</a>
      <a class="dropdown-item" href="#">Dropdown 4</a>
      <a class="dropdown-item" href="#">Dropdown 5</a>
    </div>
  </div>

      <button type="button" class="btn btn-primary" onclick="#">Regular Button 1</button>
    <button type="button" class="btn btn-primary" onclick="#">Regular Button 2</button>
</div>

По сути, вы хотите обернуть все свои кнопки в одном элементе div с классом «выпадающий».

В раскрывающемся классе объявляется позиция css: относительная, которая обеспечит правильное расположение для выпадающих списков. для правильного отображения без смещения других элементов на странице.

Обновление 2: Я обновил HTML выше, чтобы решить новую проблему, с которой вы столкнулись. Вам нужно будет обернуть отдельные выпадающие списки в div с классом «dropdown», чтобы убедиться, что они могут иметь отдельные ссылки. Чтобы убедиться, что они не сдвигаются с намеченных позиций, все кнопки теперь заключены в div с классом «btn-group».

Класс "btn-group" гарантирует, что позиция установлена ​​относительно, однако по умолчанию он вводит несколько других особенностей стиля, таких как удаление промежутка между кнопками. Чтобы переопределить это, я также добавил следующее к css:

button {
  margin: 10px !important
}

. Вышеприведенный захват всех кнопок на странице и дает им универсальное поле 10px.

Если вы хотите перезаписать любые стили bootstrap класса, вам нужно установить для этих элементов свойство! Важное.

Кодовый элемент с решением:

https://codepen.io/pen/pojvprg