Bootstrap 3，Chrome中的三列固定版式中斷

Question

我已經嘗試了所有方法以解決此問題。 我伸開雙手跪在膝蓋上！

您可以在此處查看頁面的草稿：

www.barrettcv.com/draft_so.html

如果您想了解頁面的工作原理，只需在Firefox中查看（瀏覽器窗口小於992，然后向下滾動。側面板開始連接，然后“修復”為靜態，而其余內容移動。這是正確的行為

• 主要問題。

該問題出現在Chrome中。 當菜單欄和詳細信息欄為“修復”時（向下滾動頁面），所有數字地獄都將松動。

• 次要問題。

當視圖窗口約為1200px時，菜單欄和主內容面板之間的空間將增加一倍。 這與第一個問題（讓我試圖用額頭破壞公寓的擋土牆）沒什么大不了的-但是這讓我感到比較笨拙，因為我敢肯定，有一個強制解決的更優雅的解決方案通過媒體查詢重新定位

Answer 1

似乎您遇到了一個問題，即當未為元素定義位置CSS屬性（例如top和left時，不同的瀏覽器如何計算固定位置元素的位置。 從規格 ：

...用戶代理可以自由猜測其可能的位置。

為了計算靜態位置，固定位置元素的包含塊是初始包含塊而不是視口。

我認為解決此問題的唯一方法是選擇其他定位方案。 您可以刪除.col-md-pull-*和.col-md-push-*類，並通過使用絕對定位來重新定位Bootstrap列（取決於媒體查詢以如何根據不同視口大小來安排這些列）。 在這種情況下，似乎所有瀏覽器都遵循fixed元素的位置。

.row {
  position: relative;
}

/* apply to the details column */
.push-9 {
  position: absolute;
  left: 75%;
}

示例： http ： //bootply.com/92096

Answer 2

您需要做的是fix左列和右列，從那開始，您將有一種更好的控制div的方法（因為如我所見，您希望對其進行修復）。

因此，總結一下：您需要在左側和右側列中添加position:fixed 。 修改您的left: x%和right: x% ，以使其符合您的條件。