為什么我的側(cè)邊導(dǎo)航欄設(shè)置position：fixed后，右邊的內(nèi)容全部跑到左邊來了，怎么解決，我目的是讓側(cè)邊欄背景顏色跟隨頁面高度
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <title>某管理系統(tǒng)</title>
? ? <link rel="stylesheet">
? ? <!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
? ? <style>
? ? ? ?body{
? ? margin-top:50px;
}
.sidebar{
background-color:#e5e5e5;
? ? position:fixed;
? ? top:51px;
? ? bottom:0px;
}
.sidebar ul{
margin-top:20px;
}
.grid{
margin-top:10px;
}
.progress{
margin-top:10px;}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
? <div>
? ? <!-- Brand and toggle get grouped for better mobile display -->
? ? <div>
? ? ? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar" aria-expanded="false">
? ? ? ? <span>Toggle navigation</span>
? ? ? ? <span></span>
? ? ? ? <span></span>
? ? ? ? <span></span>
? ? ? </button>
? ? ? <a href="#">某管理系統(tǒng)</a>
? ? </div>
? ? <!-- Collect the nav links, forms, and other content for toggling -->
? ? <div class="collapse navbar-collapse" id="demo-navbar">
? ? ? <ul class="nav navbar-nav">
? ? ? ? <li><a href="#">首頁<span>(current)</span></a></li>
? ? ? ? <li>
? ? ? ? ? <a href="#" data-toggle="dropdown" >功能<span></span></a>
? ? ? ? ? <ul role="mennu">
? ? ? ? ? ? <li><a href="#tab-chrome">Chrom</a></li>
? ? ? ? ? ? <li><a href="#tab-firefox">Firefox</a></li>
? ? ? ? ? ? <li><a href="#tab-opera">Opera</a></li>
? ? ? ? ? ? <li><a href="#tab-sarfari">Safari</a></li>
? ? ? ? ? ? <li><a href="#tab-ie">IE</a></li>
? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li><a href="#">幫助</a></li>
? ? ? </ul>
? ? ? ?<form class="navbar-form navbar-right" role="search">
? ? ? ? <div>
? ? ? ? ? <input type="text" placeholder="用戶名...">
? ? ? ? ? <input type="password" placeholder="密碼...">
? ? ? ? </div>
? ? ? ? <button type="submit" class="btn btn-default">登錄</button>
? ? ? </form>
? ? </div><!-- /.navbar-collapse -->
? </div><!-- /.container-fluid -->
</nav>
<div>
? <div>
? ? ? <div class="col-md-3 sidebar">
? ? ? ? ? <ul class="nav nav-pills nav-stacked">
? ? ? ? ? ? ? <li role="presentation"><a href="#">首頁</a></li>
? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? <li role="presentation"><a href="#">信息建立</a></li>
? ? ? ? ? ? ? <li role="presentation"><a href="#">信息查詢</a></li>
? ? ? ? ? ? ? <li role="presentation"><a href="#">信息管理</a></li>
? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? <li role="presentation"><a href="#">設(shè)置</a></li>
? ? ? ? ? ? ? <li role="presentation"><a href="#">幫助</a></li>
? ? ? ? ? </ul>
? ? ? </div><!--側(cè)邊欄結(jié)束-->
? ? ? <div>
? ? ? ?<h2>管理控制臺(tái)</h2>
? ? ? ? ? ? <hr>
? ? ? <div>
? ? ? ?<div>
? ? ? ?<button type="button" class="btn btn-default">Default</button>
? ? ? ? <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
? ? ? ? <button type="button" class="btn btn-primary">Primary</button>
? ? ? ??
? ? ? ? <!-- Indicates a successful or positive action -->
? ? ? ? <button type="button" class="btn btn-success">Success</button>
? ? ? ??
? ? ? ? <!-- Contextual button for informational alert messages -->
? ? ? ? <button type="button" class="btn btn-info">Info</button>
? ? ? ??
? ? ? ? <!-- Indicates caution should be taken with this action -->
? ? ? ? <button type="button" class="btn btn-warning">Warning</button>
? ? ? ??
? ? ? ? <!-- Indicates a dangerous or potentially negative action -->
? ? ? ? <button type="button" class="btn btn-danger">Danger</button>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="row grid">
? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="panel panel-primary">
? ? ? ? ? ? ? ? ? <div>最新提醒</div>
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <div class="alert alert-success" role="alert"><strong>提示</strong>您的訂單（2014001）已審批通過</div>
? ? ? ? ? ? ? ? ? ? <div class="alert alert-warning" role="alert"><strong>提示</strong>您的訂單（2014002）在審批通中</div>
? ? ? ? ? ? ? ? ? ? <div class="alert alert-danger" role="alert"><strong>提示</strong>您的訂單（2013002）未通過</div>
? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? </div><!--4柵格結(jié)束-->
? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="panel panel-primary">
? ? ? ? ? ? ? ? ? <div>我的任務(wù)</div>
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <ul >
? ?<li class="list-group-item list-group-item-success">
? ? ?<span>24</span>
? ? ?訂單審批
? ?</li></ul>
? ? ? ? ? ? ? ? ? ? ? ? <ul >
? ? ? ? ? ? ? ? ? ? ? ? <li class="list-group-item list-group-item-success">
? ? ?<span>26</span>
? ? ?收款確認(rèn)
? ?</li></ul>
? ? ? ? ? ? ? ? ? ? ? ? <ul >
? ? ? ? ? ? ? ? ? ? ? ? <li class="list-group-item list-group-item-success">
? ? ?<span>14</span>
? ? ?付款確認(rèn)
? ?</li>
</ul>
? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? </div> ? ? ?
? ? ? ? </div>
? ? ? ? <div class="row grid">
? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="panel panel-primary">
? ? ? ? ? ? ? ? ? <div>最新訂單</div>
? ? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<table class="table table-striped">
<thead><tr>
? ? ? ? ? ? ? ? ? ? ? ? ?<th>#</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>產(chǎn)品</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>數(shù)量</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>總金額</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>業(yè)務(wù)員</th>
? ? ? ? ? ? ? ? ? ? ? ? </tr></thead>
? ? ? ? ? ? ? ? ? ? ? ? <tbody>
? ? ? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? ?<td>1</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>Apple Macbook Air</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>10</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>80000</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>王小賤</td>
? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? ?<td>2</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>Apple iPad Air</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>20</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>65000</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>尹開花</td>
? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? ?<td>3</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>Apple Macbook pro</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>5</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>50000</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>劉老根</td>
? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? ? ? </tbody>
? ? ? ? ? ? ? ? ? ?</table>
? ? ? ? ? ? ? ? ? <button type="button" class="btn btn-info">查看詳情>></button>?
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? </div><!--4柵格結(jié)束-->
? ? ? ? ? <div>
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? <div class="panel panel-primary">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>工程進(jìn)度</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <label class="label label-primary">水井挖掘工程</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>60% Complete</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <label class="label label-danger">基建工程</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>60% Complete</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? </div> ? ? ?
? ? ? ? </div>
? ? ? </div><!--控制臺(tái)文字-->
? </div><!--sidebar上一層-->
</div><!--最外面-->
? ? <script src=" http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
? ? <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
2016-03-25
問題不僅僅是sidebar跑左邊那么簡(jiǎn)單哦，貼你的代碼上去看發(fā)現(xiàn)全亂了，應(yīng)該用一個(gè)col-md-2包住左邊的sidebar再用一個(gè)col-md-10包住右邊的