Question

我遇到一个问题，当我的两个Bootstrap列向左移动时，一个＆＃39;位置：固定＆＃39;属性应用于我的最左侧边栏列。仅当此列到达窗口顶部时才应用固定位置属性，否则此列是静态的。我是用JQuery做的。在JQuery代码触发和应用固定位置属性之前，所有内容都正确对齐。我想，一旦将固定位置添加到我最左侧的侧栏栏中，就会出现一个＆＃34; void＆＃34;并且有问题的两列向左移动以填充它。

以下是我的代码，详细说明。如果我的解释不清楚，我会道歉！

HTML ：

#fixed1是页面滚动到浏览器窗口顶部后固定的最左侧边栏列。我评论了＃34;转移第1列＆＃34; ＆安培;第2栏和第34页的转移;在#fixed1通过JQuery更改为固定位置后向左移动的两列旁边。

<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',
        });
    }
});

以下是我为更好地说明问题所做的两个示例图片。我相信这是一件非常简单的事情，我希望这可以帮助我更清楚地解决问题。

（显而易见的错别字）

Answer 1

当你设置位置时，使用jQuery也可以添加一个带col-md-2的div：固定在最左边的列上，然后通过滚动删除它。您正在从确定引导网格系统位置的相对上下文中删除最左侧的列。还要测试它在移动设备上的外观！

Answer 2

问题在于，当您修复该列时，它现在会移动到最近的父级。

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

应用固定定位后，Bootstrap 3列在水平方向上移动

2 个答案: