ブートストラップ固定サイドバーとヘッダー

サイドバーをnavbarとヘッダーと共にブートストラップに固定しようとしています。ブートストラップ固定サイドバーとヘッダー

Iは、以下の構造を有する：

<html> 
<head>...</head> 

<body> 

     <div class="page-header custom-header"> 
       <center> 
         <h1>Example Page Header</h1> 
       </center> 
     </div> 

     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
       <div class="container-fluid"> 
         <div class="navbar-header"> 
             .... 
         </div> 

         <div id="navbar" class="navbar-collapse collapse"> 

             <ul class="nav navbar-nav"> 
               <li>...</li> 
               <li>...</li> 
               <li>...</li> 
             </ul> 

             <ul class="nav navbar-nav navbar-right"> 
               <li>...</li> 
               <li>...</li> 
               <li>...</li> 
               <li>...</li> 
             </ul> 
         </div> 
       </div> 
     </nav> 

     <div id="wrapper" class="toggled"> 
       <div class="container-fluid"> 
            <!-- Sidebar --> 
           <div id="sidebar-wrapper"> 
            <ul class="sidebar-nav"> 
               <li>...</li> 
               <li>...</li> 
               <li>...</li> 
               <li>...</li> 
            </ul> 
        </div> 
        <!-- /#sidebar-wrapper --> 


        <br/><br/><br/> 


        <div id="page-content-wrapper"> 
         <div class="container"> 


           <div class="row"> 

            <div class="col-xs-6" style="background-color:lavender;">...</div> 

            <div class="col-xs-7" style="background-color:lavenderblush;">...</div> 
            <div class="col-xs-6" style="background-color:lavender;">...</div> 
           </div> 
         </div> 
        </div> 
       </div> 
     </div> 
</body> 
</html>

ヘッダと私は問題に直面しながら、サイドバーとナビゲーションバーは、固定することができます。 navbarが固定されている場合、ヘッダーはコンテンツと共にスクロールダウンされます。私は追加しようとしました

top: 0; 
position: fixed;

しかし、それだけでヘッダーが重なってサイドバーが発生しました。

ここは私のjsfiddleです。どんな助けもありがとうございます。ここで

出典

2017-08-13 parsecer

には、以下のCSSを変更することにより、良いスタートです：

.page-header { 
    padding: 20px 0 20px; 
    border-bottom: 1px solid #eee; 
    position: fixed; 
    top: 0; 
    margin: 0; 
    background: #fff; 
    width: 100%; 
    display: block; 
    z-index: 1; 
} 


#wrapper.toggled { 
    padding-left: 250px; 
    margin-top: 100px; 
}

それはまだ続いアップスタイルモバイルで始まり、別のビューポートにいくつかの調整がかかります。

https://jsfiddle.net/fyzyc54k/4/

出典

2017-08-13 14:57:17 developernator

ありがとう、あなたは天才です！ Htmlは私にとって非常に難しく、あなたのような人々が何分もすることができるのは驚くべきことです！ありがとう！ – parsecer

ブートストラップ固定サイドバーとヘッダー

答えて

関連する問題