Question

我正在使用一个使用右拉类右对齐的Bootstrap Navbar。当我向导航栏添加一个下拉菜单时，该下拉菜单的子菜单也与它的父级对齐，这看起来不太好。如何让它与父母保持一致？我试过在我能想到的任何地方添加左拉类，但似乎没有用。想法？

以下是代码：

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

Answer 1

您应该向id=myId添加ID（例如<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/

需要右对齐Bootstrap Navbar，但左对齐它的子菜单

1 个答案: