Question

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

Image 1) A responsive page layout with 3 boxes (on small/medium screen)

Image 2) A responsive page layout with 3 boxes (on wide screen)

目标是使此页面响应，以便每当屏幕太宽时，框3将跳到框2旁边（如图像2）。为此，我使用Bootstrap的网格系统，为Box 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>

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

有什么建议吗？

Answer 1

固定

如果我说得对你:)这是一个小提琴：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;
}

JQUERY：

$(window).scroll(function() {
    var y = $(".keeptop").offset().top;
    var scrollY = $(window).scrollTop();
    if (scrollY > y) {
        var padY = scrollY - y;
        $(".keeptop").css("padding-top", padY);
    }
});

使用Bootsrap设计响应式布局

1 个答案:

固定