2014-01-20 40 views
1

我有一個電子商務單頁面約有12項Bootstrap項目。在移動模式下,我將結帳添加到列表底部。在桌面模式下,我將它分成一個單獨的列,如下所示。問題是,如果我向下滾動,結賬消失。我想修復它與頁面滾動的位置。我正在尋找Bootstraps詞綴分區:桌面模式下的響應元素的固定位置

<div data-spy="affix" data-offset-top="200">...</div> 

但它似乎並不奏效。任何人都可以告訴我什麼我可以添加到下面的代碼來修復桌面唯一模式的位置?

<div class="row" class="visible-desktop"> 
    <div class="span7" class="visible-desktop"> 
    <div class="menu-container"> 
     Column 1 
    </div> 
    </div> 

    <div class="span5" class="visible-desktop"> 
    <div class="checkout"> 
     Checkout that breaks out to second column if desktop 
    </div> 
    </div> 
</div> 
+1

如果您正在使用最新版本的引導。可見,桌面級的更改爲。可見-MD。可見,LG,檢查出來 – chinmayahd

+0

我應該提到我使用Bootstrap 2.3.2 – csakon

回答

2

我會這樣做,爲桌面添加媒體查詢。 如果您使用引導,桌面模式高於979px;

@media (min-width:979px) { 
    .checkout { 
    position:fixed; 
    bottom:0; 
    right:0; 
    z-index:100; 

    } 
} 

當然改變尺寸和位置以滿足您的需求。

這是尺寸參考頁,引導2.3.2文檔http://getbootstrap.com/2.3.2/scaffolding.html