引導3：下面的導航欄滾動欄

Question

我有下面這個頁面：

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 

     ...... 
     </div> 
    </div> 
</nav> 


<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-3 col-sm-5" id="column1"> 
     <!-- Sidebar content SCROLLABLE --> 
     .... 
     <!-- Sidebar content end> --> 
     </div> 
    <div class="col-md-9 col-sm-7" id="column2"> 
     <!-- body content FIXED --> 
     .... 
     <!-- body content end> --> 
     </div> 

默認生成從命令行Laravel鍵入導航欄「PHP化妝：AUTH」

我」 m試圖實現的是column1在左邊滾動，而column2在右邊固定。 column1和column2都應該在導航欄下面開始，並且應該到達窗口的末端。 我已經嘗試了使用絕對位置，jQuery或兩者結合的噸解決方案。到目前爲止，這是我找到的更接近的解決方法：http://jsfiddle.net/vgxvpjdv/3/ 但它不適用於xs設備，因爲當用戶點擊按鈕以展開導航欄（摺疊漢堡包）時，項目與下面的列重疊。 這是我想要達到一個方案：

我想繼續引導網格類（如果可能的話），以有我的專欄響應。

這是完整的導航欄代碼：

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 

      <!-- Collapsed Hamburger --> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"> 
       <span class="sr-only">Toggle Navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <!-- Branding Image --> 
      <a class="navbar-brand" href="{{ url('/') }}"> 
       Laravel 
      </a> 
     </div> 

     <div class="collapse navbar-collapse" id="app-navbar-collapse"> 
      <!-- Left Side Of Navbar --> 
      <ul class="nav navbar-nav"> 
       <li><a href="{{ url('/home') }}">Home</a></li> 
      </ul> 

      <!-- Right Side Of Navbar --> 
      <ul class="nav navbar-nav navbar-right"> 
       <!-- Authentication Links --> 
       @if (Auth::guest()) 
        <li><a href="{{ url('/login') }}">Login</a></li> 
        <li><a href="{{ url('/register') }}">Register</a></li> 
       @else 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
          {{ Auth::user()->name }} <span class="caret"></span> 
         </a> 

         <ul class="dropdown-menu" role="menu"> 
          <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li> 
         </ul> 
        </li> 
       @endif 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

下面是我固定它：

1. 導航欄固定在頂部

   <nav class="navbar navbar-default navbar-fixed-top sticky"> 
   

2. 與CSS導航欄下方使用固定位置和響應的2列

   @media (min-width: 768px) { 
       #column1 { 
       position:fixed; 
       top:50px; 
       left:0; 
       overflow-y: scroll; 
       height:calc(100% - 50px); 
       } 
       #column2 { 
       position:fixed; 
       top:50px; 
       right:0px; 
       overflow-y: hidden; 
       height:calc(100% - 50px); 
       } 
   } 
   

Answer 2

您是否嘗試過使用CSS屬性 '溢出-Y：滾動' 和 '溢出-Y：固定'？

這應該可以解決這個問題，只是給各個列類的名稱，如.scrollcontent和.fixedcontent

，並在你的CSS給他們的溢出性。

.scrollcontent {0} {0} {0}溢出-y：滾動; //或使用自動如果不需要滾動 }