我感觉这个导航条太窄了 我就在style样式表里给li设置为100px 而且又让它的文字居中了 虽然可以执行成功 我把窗口缩小后就不支持响应了 那个li的宽度就是100px 不再是占据整行的了 但是用网格系统 感觉太麻烦了 怎么办
<!DOCTYPE html>
<html>
<head>
<title></title><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
li{width: 100px;text-align: center;}
</style>
</head>
<body>
<ul class="nav navbar-nav" style="background: green;">
<li class="active"><a href="">首页</a></li>
<li><a href="">博文</a></li>
<li><a href="">留言</a></li></ul>
</body>
</html>
bootstrap支持响应布局在于其相同元素在浏览器窗口不同宽度下都有对应CSS代码:
而同学你在文件中新增对li宽度的修改等同于让bootstrap对li响应式宽度全部失效，浏览器将只识别你的新增代码。所以，要达到你的需求，需要在指定浏览器窗口大小前提下修改li宽度。
如
`@media(min-width:768px){
li{
width:100px;
}
}`
祝你好运！