Bootstrap導航欄中的中心徽標

Question

我有下面的代碼，該代碼將徽標放在Bootstrap 3導航欄中。 這可以正常工作，但是我實際上希望徽標看起來漂浮在中心導航欄上方，因此導航欄的高度與徽標的高度不同。 我已經查看過類似的SO解決方案，但沒有一個我想完成的。

 .main-nav-outer { padding: 0px; border-bottom: 1px solid #dddddd; box-shadow: 0 4px 5px -3px #ececec; position: relative; background: #fff; } .main-nav { text-align: center; margin: 10px 0 0px; padding: 0; list-style: none; } .main-nav li { display: inline; margin: 0 1px; } .main-nav li a { display: inline-block; color: #222222; text-transform: uppercase; font-family: 'Montserrat', sans-serif; text-decoration: none; line-height: 20px; margin: 17px 32px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .main-nav li a:hover { text-decoration: none; color: #7cc576; } .small-logo { padding: 0 32px; } .main-section { padding: 90px 0 110px; } 

 <header class="header" id="header"> <!--header-start--> <div class="container"> large Hero </div> </header> <nav class="main-nav-outer" id="test"> <!--main-nav-start--> <div class="container"> <ul class="main-nav"> <li><a href="#header">Home</a></li> <li><a href="#service">Services</a></li> <li><a href="#Portfolio">Portfolio</a></li> <li class="small-logo"><a href="#header"><img src="~/Content/img/wop_small_logo.png" alt=""></a></li> <li><a href="#client">Clients</a></li> <li><a href="#team">Team</a></li> <li><a href="#contact">Contact</a></li> </ul> <a class="res-nav_click" href="#"><i class="fa-bars"></i></a> </div> </nav> <section class="main-section" id="service"> <!--main-section-start--> <div class="container"> Bunch o stuff </div> </section><!--main-section-end--> 

Answer 1

您是說要讓徽標位於導航欄上方嗎？ 然后，您可以像這樣編輯代碼：

 .main-nav-outer{ padding:0px; border-bottom:1px solid #dddddd; box-shadow:0 4px 5px -3px #ececec; position:relative; background:#fff; } .main-nav{ text-align:center; margin:10px 0 0px; padding:0; list-style:none; } .main-nav li{ display:inline; margin:0 1px; } .main-nav li a{ display:inline-block; color:#222222; text-transform:uppercase; font-family: 'Montserrat', sans-serif; text-decoration: none; line-height:20px; margin:17px 32px; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } .main-nav li a:hover{ text-decoration:none; color: #7cc576; } .small-logo{ padding:0 32px; } .main-section{ padding:90px 0 110px; } 

 <header class="header" id="header"> <!--header-start--> <div class="container"> large Hero </div> </header> <div class="small-logo" style="text-align:center"><a href="#header"><img src="~/Content/img/wop_small_logo.png" alt="logo"></a></div> <nav class="main-nav-outer" id="test"> <!--main-nav-start--> <div class="container"> <ul class="main-nav"> <li><a href="#header">Home</a></li> <li><a href="#service">Services</a></li> <li><a href="#Portfolio">Portfolio</a></li> <li><a href="#client">Clients</a></li> <li><a href="#team">Team</a></li> <li><a href="#contact">Contact</a></li> </ul> <a class="res-nav_click" href="#"><i class="fa-bars"></i></a> </div> </nav> <section class="main-section" id="service"> <!--main-section-start--> <div class="container"> Bunch o stuff </div> </section><!--main-section-end-->