自舉內容移過附綴

Question

我用div tag創建了一個導航欄，其中包含4 tabs。

我在這個導航欄上使用了一個affix concept。注意我的應用程序頁面分爲三個部分，使用row類 - 頁面的左側和右側部分爲空，使用col-lg-2類和頁面中部，我試圖顯示col-lg-8類下的內容。我的頁面的每個內容都屬於col-lg-8課程。

 <div class="row" style="background-color:#4C97C8;" data-spy="affix" data-offset-top="150"> 
      <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3" style="color:white;height:30px" ng-click="jump(1)" ng-mouseenter="hovering=true" ng-mouseleave="hovering=false" ng-class="{'clicked': hovering}"> 
      <strong>ABOUT</strong> 
      </div> 
      <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3" style="color:white;height:30px" ng-click="jump(2)" ng-mouseenter="hovering2=true" ng-mouseleave="hovering2=false" ng-class="{'clicked': hovering2}"> 
      <strong>FEATURE REQUEST</strong> 
      </div> 
      <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3" style="color:white;height:30px" ng-click="jump(3)" ng-mouseenter="hovering1=true" ng-mouseleave="hovering1=false" ng-class="{'clicked': hovering1}"> 
      <strong>PRODUCT</strong> 
      </div> 
      <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3 bg-primary" style="color:white;height:30px"> 
      <strong>PRODUCT LINE</strong> 
      </div> 
     </div> 

CSS是 -

.affix { 
    top: 0; 
    width:100%; 
} 

.affix + .container-fluid { 
    padding-top: 70px; 
} 

問題是 - 其他內容如按鈕，移到該導航欄手風琴面板移動。另一個是 - 當詞綴效應發生時，導航欄以更大的屏幕尺寸從col-lg-8類出來。

什麼問題？ 的jsfiddle鏈接 - https://jsfiddle.net/shashankg/707n3r21/

Answer 1

只需添加z-index: 10;到您的詞綴，CSS像我一樣在這裏：

.affix { 
    top: 0; 
    width: 100%; 
    z-index: 10; 
} 

這應該解決您的問題:)

工作的解決方案：https://jsfiddle.net/707n3r21/3/

如果你想了解更多關於z-index的信息，你應該看看這個 文檔：http://www.w3schools.com/cssref/pr_pos_z-index.asp

---

//編輯：

解決您的其他問題你詞綴-CS的寬度改爲66.66666667%。那樣COL-LG-8（bootsrap.css）的寬度相同的寬度

.affix { 
    top: 0; 
    width: 66.66666667%; 
    z-index: 10; 
} 

工作溶液：https://jsfiddle.net/707n3r21/4/

---

//編輯：

對於較小的屏幕添加這對你的CSS：

@media (max-width: 1199px) { 
    .affix { 
     width: 100% !important; 
    } 
} 

現在我們肩膀d已經修復了所有問題： https://jsfiddle.net/707n3r21/10/