需要右对齐引导导航条，左对齐子菜单

Need to right align Bootstrap Navbar but left align it's sub-menu's

本文关键字：左对齐 菜单 导航 右对齐      更新时间：2023-09-26

我正在使用一个引导导航栏，使用右拉类右对齐。当我添加一个下拉菜单到导航栏时，那个下拉菜单的子菜单也与它的父菜单右对齐，这看起来不太好。如何使它与父元素左对齐?我试着在我能想到的任何地方添加左拉类，但似乎不起作用。想法吗?

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .menu {
            font-size: 18px;
            margin-top: 10px;
        }
        .menu_icon {
            margin-top: 3px;
        }
        .dropdown-menu .sub-menu {
            left: 100%;
            position: absolute;
            top: 0;
            visibility: hidden;
            margin-top: -1px;
        }
        .dropdown-menu li:hover .sub-menu {
            visibility: visible;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
            margin-top: 0;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">My Brand</a>
            <div class="nav-collapse">
                <ul class="nav pull-right">
                    <li><a class="menu" href="index.php"><i class="icon-home icon-black menu_icon"></i> Home</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle menu" data-toggle="dropdown" href="#about">Dropdown <b
                                class="caret"></b></a>
                        <ul class="dropdown-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 class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li><a class="menu" href="#"><i class="icon-wrench icon-black menu_icon"></i> Link 1</a></li>
                    <li><a class="menu" href="#"><i class="icon-tag icon-black menu_icon"></i> Link 2</a></li>
                    <li><a class="menu" href="#"><i class="icon-envelope icon-black menu_icon"></i> Link 3</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
</body>
</html>

你应该添加一个ID(例如id=myId)到你的<ul class="dropdown-menu">，并写这样的东西:

#myId {right: auto}
#myId::before {left:12px;right:auto}
#myId::after {left:13px;right:auto}

这些CSS规则将右拉下拉样式重置为默认值。

这对我有用。看看这个例子:http://jsfiddle.net/RzMRA/3/

相关文章：