logo标签列表

为什么Bootstrap导航下拉菜单对齐到右侧？

csshtmltwitter-bootstrapdrop-down-menualignment
6

我有一个Bootstrap下拉菜单。它工作正常，但当我在通过菜单访问的页面内部时，它变得奇怪：

http://2.bp.blogspot.com/-vw49cpP7weo/UZw0Jh_zmhI/AAAAAAAACJc/oadR5CTIus0/s640/dropdown.png

你可以在图片中看到，菜单被向右移位。
我粘贴代码：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="index.html"><i class="icon-chevron-right"></i> Zimil Ltda</a>
        <div class="nav-collapse collapse">
            <ul class="nav pull-right">
                <li><a href="index.html">Inicio</a></li>
                <li><a href="acerca.html">Quienes somos</a></li>
                <li class="active" class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="jubilados.html">
                        Productos <i class="icon-caret-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="jubilados.html">Préstamos a jubilados</a></li>
                        <li><a href="cbu.html">Préstamos CBU</a></li>
                        <li><a href="otros.html">Otros créditos</a></li>
                    </ul>
                </li>
                <li><a href="trabajar.php">Trabajá con nosotros</a></li>
            </ul>
        </div>
    </div>
</div>

5个回答
15

对我来说，只需使用 pull-right dropdown-menu 即可。

编辑：

已弃用.pull-right 对齐方式。

从 v3.1.0 开始，我们已经停用了下拉菜单中的 .pull-right。要将菜单右对齐，请使用 .dropdown-menu-right。导航栏中右对齐的组件使用此类的 mixin 版本，以自动对齐菜单。要覆盖它，请使用 .dropdown-menu-left。

1
好的解决方案！这将添加“left:auto”和“right:0”样式，成功将div对齐到右侧。 - Paul Lo
5
5
在Bootstrap版本3.3.2上测试，dropdown-menu-right对我也不起作用。以下是我在我的情况下解决它的方法。
而不是：
<ul class="dropdown-menu dropdown-menu-right">

我使用了：
<ul class="dropdown-menu" style="right: 0; left: auto;">

完美无缺。
dropdown-menu-right 已经使用 .dropdown-menu-right{right:0;left:auto} 来实现右对齐。如果这个类无法工作，可能是你的 CSS 中有错误或者你正在使用旧版本的 Bootstrap。就像我所说，你需要使用 Bootstrap v3.1.0 或更高版本。 - MarceloBarbosa
4
尝试将以下内容添加到您的CSS文件或样式元素中：

尝试将以下内容添加到您的CSS文件或样式元素中：

.dropdown-menu { left:auto; }

我曾遇到过下拉菜单错位的类似问题，以下方法对我有效……

说实话，我对这个问题并不完全清楚。在我的情况下，下拉菜单的元素是水平排列并且也被位移了。我假设“auto”设置会重置对象的默认位置，不受任何祖先元素属性设置的影响（我必须添加一个单独的条目来切换菜单条目的显示方式，从水平变为垂直）。还有其他人确定吗？ - thoroughly-confused
这似乎有助于解释为什么： https://dev59.com/im855IYBdhLWcg3wNhd1 - Greg
1

更改：

<ul class="nav pull-right">

to 

<ul class="nav pull-left">

或者只需删除辅助类pull-right，只保留nav类：

<ul class="nav">

这是一个JS Bin演示：http://jsbin.com/ezuray/1/。
1
“pull-left” 不需要，因为默认情况下它会自动向左对齐。 - James Donnelly
一回家我会试一下。谢谢。 - yBrodsky
这个解决方案不起作用。它把我的菜单移到了左边。无论如何，即使删除类并接受左侧的菜单，下拉列表仍然显示错位。 - yBrodsky
1
请顶一下，问题仍然存在。 - yBrodsky
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接