[英]How do i make my nav-bar items stretch across the screen responsively
I'm wanting items in my nav bar to stretch across the width of the screen when on lets say a laptop, and go one-under another when on a phone. 我想让我的导航栏中的项目在屏幕的宽度上伸展时,让我们说一台笔记本电脑,然后在手机上一个接一个。
Also, I don't like how my items are pushed over to the left , i want them to be equally spaced across the screen. 另外,我不喜欢我的物品如何被推到左边,我希望它们在屏幕上的间距相等。
HTML: 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>
If I understand you correctly, there are some changes you should do: 如果我理解正确,您应该做一些更改:
.container
div to stretch the navigation to the width of the window. 删除.container
div以将导航拉伸到窗口的宽度。 .navbar-right
class from the navigation you don't need it. 从您不需要的导航中删除.navbar-right
类。 I didn't take care about the mobile I'm sure you know how to do all those changes in desktop only using media query. 我没有关心移动设备我确定你知道如何只使用媒体查询在桌面上进行所有这些更改。
.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 http://jsbin.com/wisuyi/edit?html,css
You will have to use media queries to get responsive view. 您必须使用媒体查询才能获得响应式视图。
.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%;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.