应用固定定位后，引导 3 列水平移动答案

【问题标题】：Bootstrap 3 columns shifting over horizontially after fixed positioning is applied应用固定定位后，引导 3 列水平移动
【发布时间】：2017-08-18 04:04:47
【问题描述】：

当“位置：固定”属性应用于我的最左侧边栏列时，我的两个 Bootstrap 列向左移动时遇到问题。固定位置属性仅在此列到达窗口顶部时应用，否则此列是静态的。我正在使用 JQuery 执行此操作。在 JQuery 代码触发和应用固定位置属性之前，一切都已正确对齐。我在想，一旦将固定位置添加到我最左侧的侧边栏列中，就会出现“空白”，并且有问题的两列向左移动以填充它。

下面是我的代码，其中包含更多详细信息。如果我的解释不清楚，我深表歉意！

HTML：

#fixed1是页面滚动到浏览器窗口顶部后修复的最左侧边栏列。我在通过 JQuery 将#fixed1 更改为固定位置后向左移动的两列旁边评论了“移动第 1 列”和“移动第 2 列”。

<div class="container-fluid">
        <div class="row" id="places-container">
        <!-- Begin Places Side Box -->
            <div class="col-md-2" id="fixed1">
                <p>Places</p> 
                    <br>
                      <img src="images/places-logo.svg" id="sidebarLogo" class="center-block" style="width: 50px;">
                    <br>
                 <span id="places-text"> 
                    fill text fill text fill text fill text 
                 </span>
            </div>
        <!-- End Places Side Box -->

    <!-- Shifting Column 1 -->  <!-- Begin Places Images -->
        <div class="col-md-5">
            <img src="images/places-img1.jpg" class="center-block">
        </div>

     <!-- Shifting Column 2 --> <div class="col-md-5">
            <img src="images/places-img2.jpg" class="center-block">
        </div>

        <div class="col-md-10 col-md-offset-2">
            <img src="images/places-img3.jpg" class="center-block">
        </div>

        <div class="col-md-10 col-md-offset-2">
            <img src="images/places-img6.jpg" class="center-block">
        </div>
        <!-- End Places Images -->

    </div>
    </div>

CSS：

相当标准。这里没有发生太多事情。

#places-container {

    font-size: 24px;
    font-weight: bold;

}

#places-container img {

    width: 100%;
    padding-bottom: 25px;

}

JQuery：

var fixmeTop = $('#fixed1').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('#fixed1').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('#fixed1').css({
            position: 'static',
        });
    }
});

以下是我制作的两张示例图片，以更好地说明我的问题。我确信这是一个非常简单的问题，我希望这可以帮助我更清楚地解决我的问题。

（明显错别字）

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

使用 jQuery 还可以在设置 position: 时使用 col-md-2 添加一个 div：固定在最左侧的列上，并将其从滚动条中移除。您正在将最左边的列从确定引导网格系统位置的相关上下文中分离出来。还要测试它在移动设备上的外观！

【讨论】：

太好了，我会试一试，感谢您的洞察力。我一定会确保一切都是响应式的。再次感谢。

【解决方案2】：

问题是当您修复该列时，它现在移动到其最近的定位父级。

修复的一个选项是在固定其他元素的同时将 col-md-offset-2 应用于移位列 1。

【讨论】：