固定sidenavとNAVブートストラップ

Question

。

これを手伝ってもらえますか？

Answer 1

<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>

これは、あなたが望むのと同じですか？