我有一个固定的静态顶部导航栏，然后有另一个左导航栏。
我正在尝试用文本填充页面的其余部分，但似乎顶部导航栏和左侧导航栏都将其隐藏了。
我尝试将整个页面放在容器类中，然后将顶部导航栏放置在一行中，然后将左侧导航栏放置在另一行中，然后每一行将具有span6，因此左侧导航栏旁边的另一列将是我的文本，但这仍然没有效果。
<!DOCTYPE html>
<html>
<head>
<title>Tester</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<style>
.dropdown-menu {
background-image: url('http://127.0.0.1:3000/img/navbar_bg.jpg') !important;
background-size: 100% !important;
}
.navbar-fixed-top {
-webkit-box-shadow: 5px 5px 5px #8E8884;
-moz-box-shadow: 5px 5px 5px #8E8884;
box-shadow: 5px 5px 5px #8E8884;
margin-bottom: 0 !important;
background-image: url('http://127.0.0.1:3000/img/navbar_bg.jpg') !important;
background-size: 100% !important;
color: white
}
body {
background-color: rgb(214, 215, 219) !important;
}
.carousel-inner>img {
height: 550px !important;
width: 900px !important;
}
.carousel-control.left,.carousel-control.right {
background-image: none !important;
}
.carousel-inner>.item>img {
margin: 0 auto;
}
.navbar-nav>li>a {
font-size: 20px;
font-size: 1.3rem;
font-weight: bold;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.38);
color: white !important;
}
.dropdown-menu>li>a {
font-size: 20px;
font-size: 1.2rem;
font-weight: bold;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.38);
color: white !important;
}
.left_navbar {
border-right: white;
margin-top: 75px;
margin-left: 5px;
width: auto;
display: inline-block;
-webkit-box-shadow: 3px 3px 3px #8E8884;
-moz-box-shadow: 3px 3px 3px #8E8884;
box-shadow: 3px 3px 3px #8E8884;
background-color: white;
overflow: scroll;
overflow-x: hidden;
position: absolute;
top: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-inner navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="" width="30%" height="30%"></a>
</div>
<!-- Right Help section -->
<ul class="nav navbar-nav pull-right">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">About</a></li>
</ul>
</li>
</ul>
</div>
</ul> <!-- End of Right Help section -->
</div>
</div>
</div>
<ul class="nav nav-pills nav-stacked left_navbar">
<li><a href="#">Email</a></li>
<li><a href="#">System Username</a></li>
<li><a href="#">Database Profile</a></li>
<li><a href="#">System Password</a></li>
<li><a href="#">location</a></li>
<li><a href="#">xxxxxxxxx</a></li>
<li><a href="#">Integration</a></li>
<li><a href="#">Is sdsadsa Server</a></li>
<li><a href="#">lalalalalalal</a></li>
<li><a href="#">sdaaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">weweaweaeweawewaewaewaeawewa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">bbbbbbb</a></li>
<li><a href="#">aaaaaaaaa</a></li>
<li><a href="#">xzczzxcxzczxcz</a></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
最佳答案
它是bootstrap 3.x版本，因此不再需要span6，而不必使用col-md-6等...阅读文档。这是您更新的工作代码
JSBIN