twitter-bootstrap 角度引导下拉菜单在左侧打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35838156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular bootstrap dropdown to open on left
提问by Gaurav Gupta
I have used angular bootstrap dropdown successfully link. But the problem it that the dropdown opens on the right side. How can i make it to open on left? Here is the markup and js i used from the given link.
我已成功使用 angular bootstrap dropdown link。但问题是下拉菜单在右侧打开。我怎样才能让它在左边打开？这是我从给定链接中使用的标记和 js。
Markup:
标记：
<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:
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'));
});
please help
请帮忙
回答by tao
Add the class dropdown-menu-rightto your <ul uib-dropdown-menu>.
将类添加dropdown-menu-right到您的<ul uib-dropdown-menu>.
By default, the drowpdown opens aligned to the left side of the parent and growing towards right side. When added the class dropdown-menu-rightit will open aligned on the right side.
默认情况下，下拉列表打开时与父级左侧对齐并朝右侧增长。添加该类后dropdown-menu-right，它将在右侧对齐打开。
EDIT:
Angular Bootstrap with Bootstrap 4 allows a more fine-tuned placement of the dropdown, using the placementattribute (w/ possible choices of bottom-right, rightor top-right).
Source: https://ng-bootstrap.github.io/#/components/dropdown/api
编辑：
带有 Bootstrap 4 的 Angular Bootstrap 允许使用placement属性（带有bottom-right,right或 的可能选择top-right）对下拉列表的位置进行更精细的调整。
来源：https: //ng-bootstrap.github.io/#/components/dropdown/api
Vue-Bootstrap provides the rightattribute (boolean).
Source: https://bootstrap-vue.js.org/docs/components/dropdown/#bd-content
Vue-Bootstrap 提供了right属性 (boolean)。
来源：https: //bootstrap-vue.js.org/docs/components/dropdown/#bd-content
React-bootstrap calls the attribute pullRight(boolean)
Source: https://react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right
React-bootstrap 调用属性pullRight(boolean)
来源：https: //react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right
