html - 如何对齐导航栏以使其不与 Logo 重叠..？

Question

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

这里是 Fiddle

代码:

 <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 链接