bootstrap如何將其修復到父元素

我想以類似的方式在「如何格式化」問題頁面的stackoverflow中使用引導程序的詞綴。bootstrap如何將其修復到父元素

我可以通過在html中添加一個css .affix { top: 70px }並使用class='affix' data-spy='affix'來添加視口，但是如果我想將該附加元素固定到父元素，該怎麼辦？

舉例來說，如果我有這樣的HTML：

<div class='affix-container'> 
    <div class='left-panel'> 
    some form, including a textarea 
    </div> 
    <div class='right-panel affix' data-spy='affix'> 
    how to format 
    </div> 
</div>

我想right-panel僅被相對貼affix-container，所以當我向下滾動，如果affix-container仍然在視口中，再貼上right-panel，否則讓right-panel向上滾動。

我還可以這樣做，如果詞綴容器是可調整大小？即。它的大小/高度隨着它包含的textarea的大小而增加？

來源

2016-08-14 swang

如果你想跟蹤左面板的滾動運動，你需要使用一個滾動間諜與詞綴。您需要首先安裝body標籤。

<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">

這裏的偏移將確保僅跟蹤開始於200從取決於報頭大小的頂部等。右邊的面板然後獲取ID =「myScrollspy」例如

<div class="hidden-xs col-sm-2" id="myScrollspy"> 
    <div class="right-panel affix" data-spy="affix" data-offset-top="400"> 
    </div> 
</div>

固定的元素被固定在400偏移量（如果你有一個頭等，很有用）。然後，您可以在從某個點向前滾動時使用css更改位置。我添加了來自代碼提取的東西，可以使用/忽略，即在xs屏幕上隱藏我的滾動條，否則它會在父行中佔用2列。

.affix { 
    top: 100px; 
}

應該使用可調整大小的容器，但我沒有測試它。

來源

2016-08-16 20:47:27 louisav

bootstrap如何將其修復到父元素

回答

相關問題