1
我希望导航栏中的项目能在屏幕宽度上伸展,让我们说一台笔记本电脑时,电话。如何让我的导航栏项目在屏幕上响应
此外,我不喜欢我的物品如何推到左边,我希望它们在屏幕上等距。
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'“ –
这需要很多覆盖。如果你不想要默认引导程序导航行为,我认为最好使用单独的菜单插件。 –