Question

即使在水平滚动时，我也会尝试将<div>类col-md-6始终放在行的右端。Here就是一个例子。

<div class="row">
 <div id="div1" class="col-md-6">.col-md-6</div>
 <div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>

当我们水平滚动时，我希望div2保留在窗口的最后6列中。这不会发生。div本身已经不在视图中了。

您能指定或提供一些参考资料吗？我使用的是Bootstrap-v3.3.0

Answer 1

你可以将第二个div设置为绝对位置，并使用一些jQuery使它始终保持在屏幕的边界。

CSS：

[class*="col-"] {
    background: #F2FAFF;
    border: 0px solid #B1D8ED;
    display:inline-block;
}
.test{
    width:2000px;
    background: #F2F79F;
    border: 0px solid #B1D8ED;
}
#fixed{
    position:absolute;
}

HTML：

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
    LARGER DIV
</div>

使用Javascript：

$(window).scroll(function(){
    $('#fixed').css('right', $(this).scrollLeft() * -1);
});

示例：

http://www.bootply.com/yeKqMVA91r

Answer 2

为什么不将大型div包装在可滚动元素中，如下所示：

<div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
  <div class="col-md-12" style="overflow:scroll;">
        <div class="test">LARGER DIV</div>
    </div>
</div>

在水平滚动时将<div>对齐到最右边的列

2 个答案: