顯示在其他列上的列引導程序

我的Bootstrap中的網格系統出現問題。我有以下結構：顯示在其他列上的列引導程序

<div class="container content"> 
    <div class="row"> 
     <div class="col-md-2 side-nav"> 
     </div> 
     <div class="col-md-8 matchview"> 
     </div> 
     <div class="col-md-2 "> 
      TEST 
     </div> 
    </div>

包含單詞TEST最後部分被顯示在右側-NAV的頂部。右側的導航欄有一個固定的位置，任何人都知道爲什麼會發生這種情況，以及將如何解決這個問題？

.matchview{ 
position: fixed; 
left: 200px; 
height: calc(100% - 100px); 
overflow-y: scroll;

}

.side-nav{ 
position: absolute; 
width: 200px; 
overflow-y: scroll; 
top: 105px; 
bottom: 0; 
padding: 0; 
text-align: center; 
opacity: 77%; 
color: #485563 !important;

}

的matchview具有200像素的左邊距;與side-nav不衝突。這有點混亂，也不適合響應能力。爲什麼我有side-nav的位置固定的原因是因爲有一個105px的頂部標題，如果我改變了定位，我在滾動上丟失了標題。

來源

2016-07-26 Reinier

你想怎樣解決？ –

你能告訴我們你的css ** side-nav **和** matchview **類嗎？ –

我在說明中加入了這個 – Reinier

具有固定位置的元素顯示在屏幕上的固定位置。不會影響網站其他部分的流動，並且取決於您的z索引，它們可以覆蓋其他元素或覆蓋。您將需要保留您的固定side-nav需要的空間，否則靜態元素將移到後面或前面。

來源

2016-07-26 07:44:13 kalsowerus

有沒有辦法用類似於clearfix的方法做到這一點？ – Reinier

不，clearfix在這裏不會幫你。如果我理解正確，你的導航在屏幕右側有一個固定的位置。因此，爲了防止元素在導航下移動，您可以將所有其他內容封裝在與正文一樣寬的div中，並減去導航。 CSS'calc（100％ - 20px）'會幫助你。 – kalsowerus

好吧我現在增加了一個計算的保證金，這有點解決了這個問題，謝謝 – Reinier

在Bootstrap每row分爲12columns。您可以將這12列以任意組合分開。在您的代碼中，您已將2+8+2組合分開。在最後2列中，您已寫下TEST。如果你給顏色，那麼它會清楚你。

<div class="container content"> 
    <div class="row"> 
     <div class="col-md-2 side-nav" style="background: red;"> 
     DIV COL-MD-2 
     </div> 
     <div class="col-md-8 matchview" style="background: orange;"> 
     DIV COL-MD-8 
     </div> 
     <div class="col-md-2 " style="background: green;"> 
      TEST 
    </div> 
</div>

來源

2016-07-26 08:23:39

顯示在其他列上的列引導程序

回答

相關問題