使用 Bootstrap 设计响应式布局

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 的网格系统，为方框 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 个框将彼此相邻！

有什么建议吗？

Answer 1

已修复

如果我没看错 :) 这是一个 fiddle : 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);
    }
});

使用 Bootstrap 设计响应式布局

Designing a responsive layout with Bootsrap

grid-system

twitter-bootstrap-3

已修复