Html 如何使我的文本在引导中使用导航栏的全宽？
我想我的文字，以伸展导航栏的整个宽度类似于 现在就像 我正在使用最新的引导css，并且有自己的自定义样式表 这是我的html代码Html 如何使我的文本在引导中使用导航栏的全宽？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想我的文字，以伸展导航栏的整个宽度类似于 现在就像 我正在使用最新的引导css，并且有自己的自定义样式表 这是我的html代码 <!doctype html> <html> <head> <title>Title</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet"
<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<a href="#"><i class="glyphicon glyphicon-cog" id="settings-cog"></i></a>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">Projects</a></li>
<li><a href="#contact">News</a></li>
<li><a href="#contact">Careers</a></li>
<li class="active"><a href="#contact">Contact Us</a></li>
<li><a href="#contact">About Us</a></li>
<li><a href="#contact">Case Studies</a></li>
<li><a href="#contact">Blog</a></li>
<li><a href="#contact">Customers</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
标题
登录：约翰·史密斯
切换导航
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: auto;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
display:table然后将内部元素设置为
width: auto;
display:table-cell;
是的，但结果是这样的。我想让它填满整个宽度你有没有试过将li宽度设置为“自动”而不是1%？啊，成功了，我尝试了100%而不是自动，如果你不介意的话，另一件很快的事情，我如何使它均匀分布并居中文本？目前，文本的长度决定了行距的大小，如果你明白我的意思的话，这是一个很粗糙的问题。。。如果知道菜单项的数量，可以将宽度设置为百分比值。在你的例子中，它是100%除以9。设定宽度：11.1%；如果你不介意的话，还有一件事，如果你看到这张图片，我希望文本居中，右边框不是导航的整个高度，你知道我如何做到这一点吗？：）