角度引导下拉菜单在左侧打开

Posted 2023-02-19

【中文标题】角度引导下拉菜单在左侧打开

【英文标题】：angular bootstrap dropdown to open on left

【发布时间】：2016-06-20 16:10:03

【问题描述】：

我已经成功使用了角度引导下拉菜单link。 但问题在于下拉菜单在右侧打开。 我怎样才能让它在左边打开？ 这是我在给定链接中使用的标记和 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>

js:

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>。

默认情况下，下拉菜单打开时与父级的左侧对齐并朝右侧增长。添加 dropdown-menu-right 类后，它将在右侧对齐打开。

编辑： 带有 Bootstrap 4 的 Angular Bootstrap 允许使用 placement 属性（可以选择 bottom-right、right 或 top-right）对下拉菜单进行更精细的调整。 来源：https://ng-bootstrap.github.io/#/components/dropdown/api

Vue-Bootstrap 提供right 属性（布尔值）。 来源：https://bootstrap-vue.js.org/docs/components/dropdown/#bd-content

React-bootstrap 调用属性 pullRight (boolean) 来源：https://react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right

【讨论】：

请注意，dropdown-menu-right 是一个 CLASS，而不是指令或属性（就像许多其他下拉设置一样）。

@cellepo，我相信我在回答的前三个字中已经明确了这一点。

@Andrei_Gheorghiu 我只是在强调这一事实，而不是纠正你（我什至赞成你的回答；谢谢你）。不要这么个人化。您的 ul 实际上也没有课程...

感谢@BrunoRibeiro 的改进建议。我接受了它并添加了其他框架。编码愉快！