Question

我的导航栏中有一个居中的徽标，侧面有三个菜单类别，当我降低分辨率时，某些类别开始消失，当我降低导航栏崩溃的分辨率时，然后变得非常混乱，整个折叠菜单显示在我得到的主滑块后面。这是我的代码。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="row">
                <div class="col-md-4">
                    <ul class="nav navbar-nav ">
                        <li class="active menu-item">
                            <a class="menu-link" href="#">Home</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">About us</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Events</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <img class="img-responsive center-block" src="images/Night-club.png"  title="Night-club logo" alt="Night-club logo">
                </div>  
                <div class="col-md-4">
                    <ul class="nav navbar-nav ">    
                        <li class="menu-item">
                            <a class="menu-link" href="#">Gallery</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Reservation</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>  
            </div>
        </div>


    </div>
</nav>
<div class="main-slider-simple">
        <ul class="img-slider">
            <li>
                <img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
            </li>
            <li>
                <img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
            </li>
            <li>
                <img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
            </li>
        </ul>
        <!-- Glavni slider -->
    </div>

这是我设置的菜单链接的CSS ...

.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}

我如何才能完成正常的责任？

这是有点解释我情况的jsfiddle。

http://jsfiddle.net/cELuF/

Answer 1

我已经改变了div的css

.col-md-4

http://jsfiddle.net/cELuF/2/

您将能够看到我在CSS框中添加的内容。

Bootstrap导航栏响应

1 个答案: