Question

我有一些问题：

如何让导航栏文本位于Bootstrap的左侧？
我已经使用bootstrap和jquery-menu-aim制作了下拉菜单。但我的下拉子菜单堆积如山。这就是我的目标。

这就是我所做的......

HTML文件

<header>
<div class="branding">Logo
     <h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="navbar-left"> <a href="index.html" class="dropdown-toggle" data-toggle="dropdown">Product</a>

                <ul class="dropdown-menu" role="menu">
                    <li class="search row-sm-3">
                        <input type="text" class="form-control" placeholder="Search" />
                    </li>
                    <li role="separator" class="divider"></li>
                    <li data-submenu-id="submenu-mobile"> <a href="#">Mobile Devices</a>
                        <div id="submenu-mobile" class="popover">
                             <h3 class="popover-title">Mobile Devices</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Smartphones</a>
                                    </li>
                                    <li><a href="#">Tablets</a>
                                    </li>
                                    <li><a href="#">Other Phones</a>
                                    </li>
                                    <li><a href="#">Accessoris</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-audio"> <a href="#">TV / Audio / Video</a>

                        <div id="submenu-audio" class="popover">
                             <h3 class="popover-title">TV / Audio / Video</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Televisions</a>
                                    </li>
                                    <li><a href="#">Audio and Video</a>
                                    </li>
                                    <li><a href="#">Accessoris</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-track-trace"> <a href="#">Cameras and Camcorders</a>

                        <div id="submenu-track-trace" class="popover">
                             <h3 class="popover-title">Cameras and Camcorders</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Cameras</a>
                                    </li>
                                    <li><a href="#">Camcorders</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-it"> <a href="#">IT</a>

                        <div id="submenu-it" class="popover">
                             <h3 class="popover-title">IT</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Monitor</a>
                                    </li>
                                    <li><a href="#">Printers</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="navbar-left"><a href="#">Apps</a>
            </li>
            <li class="navbar-left"><a href="#">Support</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right setting">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Setting
                            <span class="caret"></span>
                        </a>

                <ul class="dropdown-menu">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>
                                    My Profile</a>

                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
                                    Messages</a>

                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
                                    Logout</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!--/.nav-collapse -->
</div>
<!--/.container -->

CSS文件

.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}

下拉菜单引导程序多级

0 个答案: