Twitter bootstrap 3 使用Bootsrap设计响应性布局

我希望有一个具有以下响应布局的页面：

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

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

方框1
方框2
方框3

已修复 如果我猜对了：）这里有一把小提琴：，只需调整结果区域的大小即可看到效果：）

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>

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

---

你能解释一下吗：）@MarkoMackic我的响应式布局很好，但我无法滚动页面并修复框2和框3。如果我在页面上修改它们，设计就不再有响应了。是否有一个引导解决方案可以修复框2和框3（滚动整个页面），但同时响应速度很快，所以当屏幕较宽时，框2和框3彼此相邻？所以当屏幕较小时，您希望它们一个接一个，当屏幕较小时，您希望它们一个接一个？@MarkoMackic Yes！因此，在中小型屏幕上，我希望它们与主帖子中所附图像中的图形相似，在宽屏屏幕上，我希望框3跳转到框2旁边。我的示例代码片段是这样工作的，问题是我无法修复框2和框3（如果我修复了，布局将不再响应）。感谢您的时间。Marko，我用小屏幕和宽屏幕上的页面布局图像更新了主帖，我用附带的代码片段实现了这种布局，但问题是在框2和框3修复时滚动整个页面！你对此有什么想法吗？我会马上修复：）谢谢你的更新，它看起来像我想要的布局，但主要问题仍然存在！将.box0中的“高度”从220px更改为820px并滚动页面，在这种情况下，我希望能够在页面上看到蓝色和红色框作为固定元素（我不希望只使绿色框可滚动，我希望整个页面可滚动），有什么想法吗？在您现在的布局中，假设绿色框很大，您必须滚动页面才能看到其余部分（例如，您可以将其高度更改为820px）。现在，当您滚动页面时，您不再看到蓝色和红色框（它们随页面一起滚动）。但我希望它们被固定在页面上，这样我在滚动页面时可以一直看到它们（以查看绿色框的其余部分）。如果我在红蓝框的样式表中使用“position:fixed；”，则设计不再响应（在中/大屏幕之间切换），因此我想知道如何处理此问题……我明白了：）：）等等：）

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