Question

我使用了bootstrap导航栏和导航栏右侧的下拉菜单，当在大页面上运行时，下拉菜单可以在右边弹出，没关系，但是当我改变窗口大小时，下拉菜单会弹出页面的左边？为什么？如何让它始终在窗口右侧弹出？

这些是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>

如何让它始终在窗口右侧弹出？谢谢，谢谢。

Answer 1

问题是你试图跟踪浮动标记，这很好，但试着考虑代码中的位置标记并将位置设置为相对。这是代码：

＆＃13;

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

＆＃13;

尝试稍微摆弄位置标记，你应该得到你的结果;）

Answer 2

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

Answer 3

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

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

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

如何让下拉菜单对齐？

3 个答案: