1

pull-right クラスを使用して右揃えの 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>
4

1 に答える 1

2

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

于 2013-01-20T19:09:47.223 に答える