Css 全宽和对齐导航栏
我是css和javasript的新手, 我使用默认的twitter bootsrap navbar下拉列表,我希望我的navbar内容占据整个navbar空间的宽度, 我在这里举了一个例子 但是不起作用 这是我的html代码Css 全宽和对齐导航栏,css,twitter-bootstrap,navbar,Css,Twitter Bootstrap,Navbar,我是css和javasript的新手, 我使用默认的twitter bootsrap navbar下拉列表,我希望我的navbar内容占据整个navbar空间的宽度, 我在这里举了一个例子 但是不起作用 这是我的html代码 <div class="row-fluid"> <div class="span12"> <div class="navbar"> <div class="navbar-inner"&
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">About</a></li>
<li class="divider-vertical"></li>
<li class="span3"><a href="#">Portfolio</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Contact</a></li>
<li class="divider-vertical"></li>
</ul>
<ul class="nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web development</a></li>
<li><a href="#">Wordpress Theme development</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
-
请帮助
修改的CSS:
body {
padding-top: 20px;
padding-bottom: 60px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
margin: 60px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 80px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* 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: 1%;
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;
}
您需要向我们展示如何使用jsfiddle.net并包含您的css。对不起,我需要时间来理解jsfiddle,这里是自定义css,不起作用。。