Question

对齐导航栏时遇到问题。当我调整窗口大小时，我的导航栏重叠了徽标...

代码：

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background: rgba(0,0,0,0.6)">
        <div class="container-fluid" style="">
            <div class="navbar-header" style="height:70px;">
                <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex1-collapse" style="z-index: 100">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <img src="http://placehold.it/471x71&text=MY+LOGO+GOES+HERE" style="position:fixed;"/>
                </a>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Services 1</a></li>
                            <li><a href="#">Services 2</a></li>
                            <li><a href="#">Services 3</a></li>
                            <li><a href="#">Services 4</a></li>                                
                        </ul>
                    </li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                    <li><a href="#">Page 6</a></li>                      
                    <li><a href="#">Page 7</a></li>
                    <li><button type="button" class="btn btn-lg navbar-btn btn-secondary" style="margin:10px;margin-top: 0;border-radius: 0;">Sign in</button></li>                      
                    <li><button type="button" class="btn btn-lg navbar-btn btn-secondary" style="margin:10px;margin-top: 0;border-radius: 0;">Register</button></li>
                </ul>        
            </div>
        </div>
    </nav>

Answer 1

您可以将宽度设为 navbar-brand 类并将图片应用为100％

<强> CSS

 @media(max-width:768px){

     .navbar-brand{
         width:70% /*change the width as per your requirement*/
    }

    .navbar-brand img{
         width:100%; /* adjust the width as per your logo size*/
        position:relative!important;
    }

这是 JSFIDDLE LINK

Answer 2

也许你可以这样做工作小提琴 http://jsfiddle.net/4bvsbkr2/1/

@media (max-width: 1360px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

但是我不喜欢这个，因为它的崩溃很快，也许你可以为每个分辨率不同的造型元素如

<div class="visible-sm"></div>
<div class="visible-xs visible-sm"></div>

如何对齐导航栏以使其不与徽标重叠..？

2 个答案: