Bootstrap fixed col-md-4

Question

我想將引導列位置設置爲固定的（col-md-4）。 這是關於一個店鋪，分爲2列：

1. 店含量（很長&滾動）col-md-8
2. 車的內容（很短&固定的，所以當你滾動商店的內容，在購物車的內容始終保持可見）col-md-4

我不知道在bootstrap中這樣做的正確方法是什麼。

這是我預期的行爲：http://image.noelshack.com/fichiers/2016/08/1456677164-neededbehavior.jpg

現在，我已經嘗試設置col-md-4位置固定css財產，它有點兒工作，但不是全部。

正如您在this picture中所看到的，當我將col-md-4的位置設置爲固定時，其寬度（col-md-4的33％）比應該更寬。

實際上，col-md-4的bootstrap的css屬性寬度爲33％，它是從其父容器中計算出來的。

但是，當位置設置爲固定時，由於某些原因，33％是從屏幕視圖寬度計算的。因此，如果分辨率寬度爲2500像素，則不會是容器1170像素的33％，而是2500像素的屏幕尺寸的33％。 因此，col-md-4是比預期更寬，並溢出容器。

我想我可以重新計算在JavaScript中的正確寬度，但我不知道是否有一個正確的方法來做bootstrap（我猜是這樣）。

Answer 1

在這種特殊情況下，我不會使用Bootstrap col類。它會更好看的東西，如：

<div class="content"></div> 
<div class="cart"></div> 

.content { 
    width: 100%; 
    padding-right: 200px; 
} 

.cart { 
    width: 200px; 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 99; 
} 

引導是好的，但不要忘了，那山坳類是浮動的項目。在你的情況下，這種方法並不合適，因爲你希望你的.cart側欄被修復，並且不遵守任何浮動規則。