Раскрывающийся угловой угловой бутстрап
Я использовал угловую загрузочную выпадающую ссылку успешно. Но проблема в том, что раскрывающийся список открывается с правой стороны. Как я могу сделать это, чтобы открыть слева? Вот разметка и js, которые я использовал по данной ссылке.
Разметка:
<div ng-controller="DropdownCtrl">
<!-- Single button with keyboard nav -->
<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Dropdown with keyboard navigation <span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
ЯШ:
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});
пожалуйста помоги
1 ответ
Добавить класс dropdown-menu-right
на ваш <ul uib-dropdown-menu>
,
По умолчанию drowpdown открывается выровненным по левой стороне родительского элемента и растущим по направлению к правой стороне. Когда добавили класс dropdown-menu-right
он откроется выровненным по правой стороне.
РЕДАКТИРОВАТЬ:
Angular Bootstrap с Bootstrap 4 позволяет более точно настроить раскрывающийся список, используя placement
атрибут (с возможным выбором bottom-right
, right
или же top-right
).
Источник: https://ng-bootstrap.github.io/
Vue-Bootstrap обеспечивает right
атрибут (логическое значение).
Источник: https://bootstrap-vue.js.org/docs/components/dropdown/
React-bootstrap вызывает атрибут pullRight
(Булево)
Источник: https://react-bootstrap.github.io/components/dropdowns/