2016-10-25 106 views

回答

0

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 
<style> 
 
.sidebar{ 
 
\t height: 500px; 
 
\t border: thin black solid; 
 
\t 
 
} 
 

 
.nav_menu{ 
 
\t border: thin red solid; 
 
} 
 

 
.content{ 
 
\t border: thin green solid; 
 
\t height: 430px; 
 
} 
 

 

 

 
</style> 
 

 

 

 
<div class="row"> 
 
<div class="col-md-3 sidebar"> 
 
\t Your side bar content 
 
</div> 
 
<div class="col-md-9"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-12"> 
 
\t \t <nav class="navbar navbar-default nav_menu"> 
 
\t \t <div class="container-fluid"> 
 
\t \t  <ul class="nav navbar-nav"> 
 
\t \t  <li class="active"><a href="#">Home</a></li> 
 
\t \t  <li><a href="#">Page 1</a></li> 
 
\t \t  <li><a href="#">Page 2</a></li> 
 
\t \t  <li><a href="#">Page 3</a></li> 
 
\t \t  </ul> 
 
\t \t </div> 
 
\t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="row" style="margin:0;"> 
 
\t \t <div class="col-md-12 content"> 
 
\t \t \t Your Content 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
</div>

這是你想要的一樣嗎?

+0

是的,我的觀點應該看起來像你的建議。 但是當我滾動內容時,邊欄和導航應該是固定的。嘗試將您的內容高度更改爲1200px。 –

+0

然後你可以使用名爲'position:fixed'的CSS屬性到側邊欄和導航菜單。你嘗試過嗎? –

+0

是的,我試過了。謝謝,我發現我可以爲我的情況使用apex。 –