首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >angular bootstrap下拉菜单在左侧打开

angular bootstrap下拉菜单在左侧打开
EN

Stack Overflow用户
提问于 2016-03-07 15:16:29
回答 1查看 20.7K关注 0票数 25

我已经成功地使用了angular bootstrap dropdown 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'));
});

请帮帮忙

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-07 15:20:57

将类dropdown-menu-right添加到您的<ul uib-dropdown-menu>

默认情况下,下沉打开时与父对象的左侧对齐,并向右侧增长。当添加dropdown-menu-right类时,它将在右侧对齐打开。

编辑:

带Bootstrap 4的Angular Bootstrap允许使用placement属性(可选择bottom-rightrighttop-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 (布尔值)

来源:https://react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right

票数 68
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35838156

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档