jquery - 如何让下拉菜单右对齐？

Question

我用的是bootstrap navbar，在navbar的右边有一个下拉菜单，当在大页面上运行时，下拉菜单可以在右边弹出，没问题，但是当我改变窗口大小时，下拉菜单弹出在页面左侧？为什么？如何让它总是在窗口右侧弹出？

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

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

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

尝试稍微调整一下位置标签，您应该会得到结果 ;)