Question

我的navbar重叠navbrand，其中提到了公司和名称的徽标。

HTML：

<nav class="navbar-default">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>                        
                                </button>
                                <a class="navbar-brand" href="#">
                                    <img class="img-responsive" id="logo" alt="Brand" src="assets/images/logo.png"/>
                                </a>
                            </div>
                            <div class="collapse navbar-collapse" id="myNavbar">        
                                <ul class="nav navbar-nav navbar-right">
                                    <li id="active"><a  href="index.html">Home</a></li>
                                    <li><a  href="services.html">Events</a></li>
                                    <li><a  href="process.html">Pages</a></li>
                                    <li><a  href="about us.html">Blog</a></li>
                                    <li><a  href="contact.html">Shop</a></li>
                                    <li><a  href="contact.html">Cause</a></li>
                                    <li><a  href="contact.html">Donate</a></li>
                                    <li><a  href="contact.html">Gallery</a></li>
                                    <li><a  href="contact.html">Contact</a></li>
                                </ul>
                            </div>  
                        </div>
                    </nav>

Answer 1

这里是为我工作的jsfiddle与您的相同代码请查看演示

＆＃13;

<nav class="navbar-default">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>                        
                                </button>
                                <a class="navbar-brand" href="#">
                                    <img class="img-responsive" id="logo" alt="Brand" src="assets/images/logo.png"/>
                                </a>
                            </div>
                            <div class="collapse navbar-collapse" id="myNavbar">        
                                <ul class="nav navbar-nav navbar-right">
                                    <li id="active"><a  href="index.html">Home</a></li>
                                    <li><a  href="services.html">Events</a></li>
                                    <li><a  href="process.html">Pages</a></li>
                                    <li><a  href="about us.html">Blog</a></li>
                                    <li><a  href="contact.html">Shop</a></li>
                                    <li><a  href="contact.html">Cause</a></li>
                                    <li><a  href="contact.html">Donate</a></li>
                                    <li><a  href="contact.html">Gallery</a></li>
                                    <li><a  href="contact.html">Contact</a></li>
                                </ul>
                            </div>  
                        </div>
                    </nav>

＆＃13;

Working for me demo

所有设备的响应式导航

1 个答案: