如何让下拉菜单右对齐？答案

【问题标题】：how to let dropdown menu align-right?如何让下拉菜单右对齐？
【发布时间】：2015-03-25 06:59:01
【问题描述】：

我使用了引导导航栏，导航栏右侧有一个下拉菜单，在大页面上运行时，下拉菜单可以在右侧弹出，没关系，但是当我更改窗口大小时，下拉菜单弹出在页面左侧？为什么？如何让它总是在窗口右侧弹出？

这些是css代码：

       <style>
        .navbar-header, .navbar-brand {
            float: left !important;
        }

        .dropdown-toggle {
            float: right !important;
        }

        .navbar-right:last-child {
            margin-right: 0px !important;
            padding-top: 8px !important;
        }

    </style>

这些是html代码：

            <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="navbar-right">
                    <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-label="Left Align">
                        <i class="glyphicon glyphicon-list" aria-hidden="true"></i>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
            <!-- /.container-fluid -->
        </nav>

如何让它总是在窗口右侧弹出？谢谢，谢谢。

【问题讨论】：

你能不能做一个小提琴或bootply，这样我们就可以看到正在运行的代码
jsfiddle.net/taobataoma/2w2ayyg4 这里是小提琴演示，你可以看到 iframe 窗口左侧的弹出菜单，当你将 iframe 窗口拆分为 big big big 时，弹出菜单在 iframe 的右侧窗口，我希望它总是在 iframe 窗口的右侧弹出

标签： jquery css twitter-bootstrap

【解决方案1】：

问题是您正在尝试跟踪浮动标记，这很好，但请尝试考虑代码中的位置标记并将位置设置为相对。这是代码：

      <style>
        .navbar-header, .navbar-brand {
            float: left !important;
            position: relative;
        }

        .dropdown-toggle {
            float: right !important;
            position: relative;
        }

        .navbar-right:last-child {
            margin-right: 0px !important;
            padding-top: 8px !important;
            position: relative;
        }

    </style>

尝试修改位置标签，你应该得到你的结果；）

【讨论】：

我使用了你的 css 代码，当我将浏览器窗口更改为较小尺寸时，弹出菜单位于窗口左侧，但我希望它位于窗口右侧，当我将窗口更改为大号，窗口右边的弹出菜单，这次没问题
jsfiddle.net/taobataoma/2w2ayyg4 这里是小提琴演示，你可以看到 iframe 窗口左侧的弹出菜单，当你将 iframe 窗口拆分为 big big big 时，弹出菜单在 iframe 的右侧窗口，我希望它总是在 iframe 窗口的右侧弹出

【解决方案2】：

将此添加到您的 css 中，它应该可以解决问题：

它所做的是覆盖 left 引导设置并将其替换为 right: 0

.open > .dropdown-menu {
  right:0;
  left: auto;
}

【讨论】：

我在chrome中测试过，很好，在safiri中，弹出菜单宽度是窗口宽度，如何解决？
请查看更新的代码并再次检查 - 将 left: unset 更改为 left: auto - 我没有意识到它没有得到很好的支持
欢迎，很高兴也很高兴我能提供帮助

【解决方案3】：

将.dropdown-menu { margin-left: 52.5vw; } 行附加到您的css 将强制下拉菜单始终位于屏幕右侧。

【讨论】：