0

我想要一个具有以下响应式布局的页面：

图 1) 带有 3 个框的响应式页面布局（在中小型屏幕上）

图 2) 带有 3 个框的响应式页面布局（在宽屏上）

目标是使该页面具有响应性，以便每当屏幕太宽时，框 3 将跳到框 2 旁边（如图 2 所示）。为此，我使用 Bootstrap 的网格系统，为框 1 分配“8”跨度，为框 2 和 3 分配“4”。它按照我描述的方式工作。现在我想修复 Box 2 和 Box 3 的位置，所以当我滚动页面（查看 Box 1 的内容）时，我会在我的视口中看到 Box 2 和 3，我不想让 Box 1 可滚动！我希望整个页面滚动！您知道任何可以处理这种情况的 Bootstrap 解决方案吗？（我想保持整个页面的响应式布局）

这是我对该页面的基本代码：

<div class=row>
  <div class="col-md-8 col-lg-6">Box 1</div>
  <div class="col-md-4 col-lg-3">Box 2</div>
  <div class="col-md-4 col-lg-3">Box 3</div>
</div>

现在我可以使框 1 可滚动，但它会将滚动条放在框 1 旁边，但我希望它位于页面的右侧，因此整个页面滚动，但框 2 和框 3 是固定的。同时，在大屏幕上，他们会改变他们的位置，所有 3 个盒子将彼此相邻！

有什么建议吗？

4

1 回答 1

0

固定的

如果我猜对了:) 这是一个小提琴：https ://jsfiddle.net/fL2L0qnj/2/ ，只需调整结果区域的大小即可查看效果:)

HTML：

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box0"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="col-xs-6 col-md-12"> <!--do this at your preference, look at example and then
 arrange it for your self :)

<div class="box1"></div>
</div>
<div class="col-xs-6 col-md-12">
<div class="box2"></div>
</div>
</div>
</div>

CSS：

.box1,.box2{
  width:80%;
  height:100px;
  margin:10px auto;
}
.box0{
  width:80%;
  height:220px;
  margin:auto;
  margin-top:10px;

  background:green;
}
.box1{
    background:blue;
}
.box2{
  background:red;
}

查询：

$(window).scroll(function() {
    var y = $(".keeptop").offset().top;
    var scrollY = $(window).scrollTop();
    if (scrollY > y) {
        var padY = scrollY - y;
        $(".keeptop").css("padding-top", padY);
    }
});
于 2016-01-22T15:00:52.540 回答