Html 为什么 Bootstrap 导航下拉菜单向右对齐?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16682784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:40:01  来源:igfitidea点击:

Why is Bootstrap nav dropdown menu aligned to the right?

csshtmltwitter-bootstrapdrop-down-menualignment

提问by yBrodsky

I am having a bootstrap dropdown. It works fine, but when I am inside a page accessed through the menu, then it gets weird:

我有一个引导下拉菜单。它工作正常,但是当我进入通过菜单访问的页面时,它变得很奇怪:

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

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

You can see in the picture, the menu is displaced to the right.

您可以在图片中看到,菜单向右移动。

I paste the code:

我粘贴代码:

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

回答by MarceloBarbosa

Just pull-right dropdown-menuworked for me.

刚刚pull-right dropdown-menu为我工作。

EDIT:

编辑:

Deprecated .pull-rightalignment

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

As of v3.1.0, we've deprecated .pull-righton dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

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

回答by rposborne

.pull-righthas been deprecated as of Bootstrap 3.1.0

.pull-right自 Bootstrap 3.1.0 起已弃用

use .dropdown-menu-right

.dropdown-menu-right

See http://getbootstrap.com/components/#dropdowns-alignment

请参阅http://getbootstrap.com/components/#dropdowns-alignment

回答by Vince

As tested on version 3.3.2 of bootstrap, dropdown-menu-rightdoes not work for me either. Here's what I did to fix it in my case.

在 bootstrap 的 3.3.2 版上进行测试时,dropdown-menu-right对我也不起作用。这是我在我的情况下为修复它所做的。

Instead of:

代替:

<ul class="dropdown-menu dropdown-menu-right">

I used:

我用了:

<ul class="dropdown-menu" style="right: 0; left: auto;">

Works perfectly.

完美运行。

回答by thoroughly-confused

Try adding this to your css file or as style element this:

尝试将此添加到您的 css 文件或作为样式元素:

.dropdown-menu { left:auto; }

I had a similar problem with displaced drop-down and this worked for me.....

我在移位下拉菜单上遇到了类似的问题,这对我有用.....

回答by Leniel Maccaferri

Change:

改变:

<ul class="nav pull-right">

to

<ul class="nav pull-left">

OR just remove the helper class pull-rightleaving only the navclass:

或者只是删除助手类,pull-right只留下nav类:

<ul class="nav">

Here's a JS Bin demo: http://jsbin.com/ezuray/1/

这是一个 JS Bin 演示:http: //jsbin.com/ezuray/1/