如何讓我的導航欄項目在屏幕上響應

我希望導航欄中的項目能在屏幕寬度上伸展，讓我們說一臺筆記本電腦時，電話。如何讓我的導航欄項目在屏幕上響應

此外，我不喜歡我的物品如何推到左邊，我希望它們在屏幕上等距。

HTML：

<!-- Logo --> 
<div class="navbar navbar-default navbar-fixed-top" role=""> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="index.html"> 
     <img src="assets/images/BridgmanLogo.png" alt="Logo"> 
     </a> 
    </div> 
    </div> 
</div> 
<!-- SLIDER --> 
<header class="container-fluid intro-slider"> 
    <div class="bg-slider-wrapper"> 
    <div id="bg-slider" class="flexslider bg-slider"> 
     <ul class="slides"> 
     <li class="slide slide-1"> 
      <div class="push-text-slide"></div> 
      <section class="home-promo"> 
      <div class="text-center"> 
       <h2 class="titlepro"> 
       <span class="upper">Welcome to</span> 
       <span class="middle"><strong>Bridgman IBC Ltd</strong></span> 
       <span class="bottom">An Example Tag Line Goes Here</span></h2> 
       <a href="" class="btn promo-button"><span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop</a> 
      </div> 
      </section> 
     </li> 
     <li class="slide slide-2"> 
      <div class="push-text-slide"></div> 
      <section class="home-promo"> 
      <div class="text-center"> 
       <h2 class="titlepro"> 
       <span class="upper">Welcome to</span> 
       <span class="middle"><strong>Bridgman IBC Ltd</strong></span> 
       <span class="bottom">An Example Tag Line Goes Here</span></h2> 
       <a href="" class="btn promo-button"><span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop</a> 
      </div> 
      </section> 
     </li> 
     <li class="slide slide-3"> 
      <div class="push-text-slide"></div> 
      <section class="home-promo"> 
      <div class="text-center"> 
       <h2 class="titlepro"> 
       <span class="upper">Welcome to</span> 
       <span class="middle"><strong>Bridgman IBC Ltd</strong></span> 
       <span class="bottom">An Example Tag Line Goes Here</span></h2> 
       <a href="" class="btn promo-button"><span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop</a> 
      </div> 
      </section> 
     </li> 
     </ul> 
    </div> 
    </div> 
</header> 
<!-- NAVIGATION BAR --> 
<div class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
    <div class="navbar-brand"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a> 
     </li> 
     <li><a href="about.html">About</a> 
     </li> 
     <li><a href="about.html">Specifying</a> 
     </li> 
     <li><a href="about.html">Market Sectors</a> 
     </li> 
     <li><a href="about.html">Shop</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div>

來源

2016-06-08 Michael Barley

我不認爲有太多的空間可以水平容納在較小的設備而不會破壞新的線條。 –

根據bootstrap文檔**當前不支持對齊導航欄導航鏈接。**。關於摺疊：「當視口比'@ grid-float-breakpoint'窄時，navbar會摺疊到垂直移動視圖中，並且當視口至少爲'@ grid-float-breakpoint時，會擴展到其水平非移動視圖調整這個變量在Less源文件中來控制導航欄合攏/展開的時間，默認值是'768px'「 –

這需要很多覆蓋。如果你不想要默認引導程序導航行爲，我認爲最好使用單獨的菜單插件。 –

如果我理解正確的話，也有一些變化，你應該做的：

閱讀我增加了CSS。我使用flex在菜單中平等地拉伸項目。
刪除.container div以將導航拉伸至窗口寬度。
從您不需要的導航中刪除.navbar-right類。

我沒有照顧有關移動我敢肯定，你知道如何僅用媒體查詢做在桌面上的所有這些變化。

.navbar-brand, .navbar-nav, .navbar-nav>li { 
 
    float:none !important; 
 
} 
 

 
.navbar-nav { 
 
    display:flex; 
 
} 
 

 
.navbar-nav>li { 
 
    flex: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<!-- NAVIGATION BAR --> 
 
<div class="navbar navbar-default" role="navigation"> 
 
    <!--<div class="container">--> 
 
    <div class="navbar-brand"> 
 
    <ul class="nav navbar-nav"> 
 
     <!--<ul class="nav navbar-nav navbar-right">--> 
 
     <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a> 
 
     </li> 
 
     <li><a href="about.html">About</a> 
 
     </li> 
 
     <li><a href="about.html">Specifying</a> 
 
     </li> 
 
     <li><a href="about.html">Market Sectors</a> 
 
     </li> 
 
     <li><a href="about.html">Shop</a> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 
    <!--</div>--> 
 
</div>

http://jsbin.com/wisuyi/edit?html,css

來源

2016-06-08 12:00:09

你將不得不使用媒體查詢得到響應視圖。

.navbar-brand{ 
    width:100%; 
    display:inline-block; 
} 
.navbar-brand ul li{ 
    width:20%; 
    /*Adjust the percent based on 100/number of items (Here it is 5)*/ 
    min-width:150px; 
    /*Keep a minimum width such that the text does not overflow*/ 
    display:inline-block; 
    text-align:center; 
} 

/*Write media queries for Mobile and tablets*/ 
@media (max-width: 420px) { 
    .navbar-brand ul li{ 
    width:100%; 
    } 
}

來源

2016-06-08 12:05:05 Rishabh

如何讓我的導航欄項目在屏幕上響應

回答

相關問題