如何让我的导航栏项目在屏幕上响应

问题描述：

我希望导航栏中的项目能在屏幕宽度上伸展，让我们说一台笔记本电脑时，电话。如何让我的导航栏项目在屏幕上响应

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

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>

我不认为有太多的空间可以水平容纳在较小的设备而不会破坏新的线条。 –

根据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

答

你将不得不使用媒体查询得到响应视图。

.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%; 
    } 
}

如何让我的导航栏项目在屏幕上响应

相关推荐