使用引導貼上同時保持響應列布局

Please see this fiddle.我有一個主要內容股利和一個側邊欄，我想貼到網頁當用戶滾動的頂部。一切工作正常，除了在移動觀看時：使用引導貼上同時保持響應列布局

沒有詞綴的東西，列表現爲引導列應和側邊欄屬於地方正下方的主要股利。但與詞綴，div簡單消失。

我也有點這個固定使用媒體查詢：

//Override affix on small screens: 
@media (max-width: 750px) { 
    .affix { 
     position: static; 
    } 
}

這使DIV，它應該是在小屏幕上，並恢復到桌面詞綴佈局。然而，在它消失的中間有一個空白。當您將窗口拖入時，在一半左右消失，然後在窗口被拖拽得更小的情況下重複正確的位置。我試過調整750px的價值，但一直未能拿出一個實際可行的數字。

我如何能調和網格佈局和開/關詞綴開關？我如何知道斷點的位置 - 我是否應該避免使用特定數量的PX並採取另一種解決此問題的方法？

我目前的引導佈局（我已經添加了height:500px所以你可以看到在JS小提琴滾動行爲 - 它不存在於我的實際代碼）：

<div class="container-fluid"> 
    <div class="row" id="content"> 

    <div class="col-md-8" style="height:500px"> 
     Main content 
    </div> 

    <div class="col-md-4"> 
     <div class="affix" data-spy="affix" data-offset-top="0"> 
     Side content 
     </div> 
    </div> 

    </div> 
</div>

非常感謝

來源

2016-07-19 samiles

我不清楚您希望將Affix移動到哪裏，無論是在內容的右側還是在其下面，但我會盡力幫助：

在您的小提琴中，我看不到一個點該詞綴暫時消失，但我確實看到它按預期做出反應與網格系統類。即：col-md- * divs在992px處展開爲100％寬度。

媒體查詢斷點COL-MD-*爲992px。（除非你已經在你的Bootstrap副本中重置它。）

如果你想保持你在桌面上的寬度比例，我建議將你的類從.col-md- *換到.col -xs- * 所以.COL-MD-8成爲.COL-XS-8和.COL-MD-4成爲.COL-XS-4 - 但是你的主要內容將是對手機很窄。

不知道，如果這就是你要什麼？

來源

2016-07-19 12:42:52 peroxide

使用引導貼上同時保持響應列布局

回答

相關問題