如何對齊導航欄，使其不重疊logo ..？

我在對齊導航欄時遇到問題。當我調整窗口導航欄我重疊的標誌......如何對齊導航欄，使其不重疊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>

來源

2014-12-04 Developer Desk

什麼是你想要的風格/效果？要將標識始終放在上面？讓徽標始終位於導航欄旁邊？ – 2014-12-04 11:45:50

我想在導航欄旁邊有標誌...如何保持標誌和導航欄之間的空間，以便兩者不重疊...？ – 2014-12-04 11:47:21

您遇到的問題是，由於導航欄和徽標非常大，除了大型桌面顯示器之外，您嚴重缺乏彼此相鄰的空間。作爲迴應，你會想在沒有空間的小屏幕上看到這種情況。 – 2014-12-04 11:50:13

也許你可以把它像這樣工作小提琴 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; 
    } 
}

但我不喜歡這個，因爲它的崩潰很快，也許你可以爲每個決議differen像

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

來源

2014-12-04 11:54:11

元素牛逼的造型你可以做我給寬度導航欄品牌類以及爲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

來源

2014-12-04 12:07:05

如何對齊導航欄，使其不重疊logo ..？

回答

相關問題