Bootstrap固定側欄和標題

我正在嘗試使側欄固定在自舉與導航欄和標題。Bootstrap固定側欄和標題

我有以下結構：

<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

Bootstrap固定側欄和標題

回答

相關問題