Question

我有一个来自bootstrap的下拉菜单，我在页面右侧对齐，我想向左打开。我试图把左拉，但它只是将我的按钮移动到div的左侧部分。那是为什么？

<button class="btn btn-link dropdown pull-left account-menu-btn">
                <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
                    <img src="http://placehold.it/40X40" class="img-circle">
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">
                            Create
                        </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a href="#">
                            Settings
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Log out
                        </a>
                    </li>
                </ul>
            </button>

这是我的account-menu-btn样式：

.account-menu-btn {
    float: right;
}

Answer 1

问题是下拉列表的位置是绝对的，按钮本身有一个相对位置，使得下拉列表显示在按钮的宽度内

所以你必须通过给它position:static;来清除按钮的相对位置，并将position:relative;应用到你的包装div

＆＃13;

.dropdown, .dropup{
  position:static!important;
}
.wrapper{
  position:relative;
  width:80%;
}
ul.dropdown-menu{
  right:auto!important;
  left:0!important;
  top:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="wrapper container">
<button class="btn btn-link dropdown pull-right account-menu-btn">
                <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
                    <img src="http://placehold.it/40x40" class="img-circle">
                </a>
                <ul class="dropdown-menu pull-left" role="menu">
                    <li>
                        <a href="#">
                            Create
                        </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a href="#">
                            Settings
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Log out
                        </a>
                    </li>
                </ul>
            </button>
            
</div>

＆＃13;

Bootstrap下拉菜单在左侧打开

1 个答案: