Выравнивание выпадающего меню boostrap

Я новичок в начальной загрузке и создал веб-сайт с этим, но мое выпадающее меню не работало, оно открывалось «из окна», так что кто-нибудь может мне помочь с этим? Я много пробовал с классами, но это не сработало...

https://i.imgur.com/DbjKm3U.png

мой код:

<div class='dropdown'>
<button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown'>
<img class='rounded-circle float-right' height='45px' src='$profileimgurl' />
</button>
<ul class='dropdown-menu pull-left' role='menu'>
      <li class='dropdown-header'>$username</li>
            <li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
            <li class='dropdown-header'><a class=''>Friends</a></li>
            <li class='dropdown-header'><a class=''>Activity</a></li>
      <li class='divider'></li>
      <li class='dropdown-header'>Account</li>
      <li>
            <form action='includes/logout.inc.php' method='post'>
                <button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
            </form>
    </li>
</ul>
</div>

html twitter-bootstrap

05.04.2019 20:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

323

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

По умолчанию компонент Bootstrap Dropdown выравнивается по левому нижнему полю любого объекта, вызвавшего его. Чтобы переопределить это поведение, вы применяете dropdown-menu-right к dropdown-menu. Чтобы использовать собственный код в качестве примера:

<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
  <form action='includes/logout.inc.php' method='post'>
  <button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
  </form>
</li>
</ul>

Неясно, используете ли вы Bootstrap 3.x или Bootstrap 4.x, но в последнем вы также можете применить адаптивное поведение к этому классу (т. е. .dropdown-menu-lg-right для лучшей модификации вашего пользовательского интерфейса на разных устройствах или экранах.

05.04.2019 20:48

Эта техника работает только на Bootstrap 4

Это не проблема, братан, это поведение выпадающих списков по умолчанию, но для решения этой ситуации вам нужно использовать класс dropdown-menu-right, для получения дополнительной информации перейдите по ссылке это.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class = "btn-group">
  <button type = "button" class = "btn btn-secondary dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
    Right-aligned menu
  </button>
  <div class = "dropdown-menu dropdown-menu-right">
    <button class = "dropdown-item" type = "button">Action</button>
    <button class = "dropdown-item" type = "button">Another action</button>
    <button class = "dropdown-item" type = "button">Something else here</button>
  </div>
</div>

05.04.2019 20:50

Другие вопросы по теме

Bootstrap Желоба

Как в Bootstrap выровнять текст по левому краю?

Как правильно удалить загрузочную CDN из `assets.precompile` и изолировать таблицы стилей контроллера

В Bootstrap, как мне выровнять мою кнопку по левому краю с элементом выше?

Разрыв строки в div перед укладкой div

Проблема со стилем после обновления Angular 7

HTML&CSS + Twitter Bootstrap: добавить сообщение об ошибке после проверки Angular

Как ссылаться на sass-стили is-invalid в пользовательском классе?

Как отобразить флажок на изображении выше с серым или блеклым фоном?

Css не применяется, когда я использую localpath для включения bootstrap.min.css, он работает, когда я использую URL CDN вместо localpath

Выравнивание выпадающего меню boostrap

Ответы 2

Другие вопросы по теме

Похожие вопросы