Question

我有2列col-md-8和col-md-4，我调整窗口大小直到最后，col-md-4堆叠在底部，我想做那么大的事情。。

Answer 1

这实际上取决于您想要做什么，并且需要更好地理解新的col- - 代码。请看下面的代码 -

<div class="row">
    <div class="well col-xs-4 col-sm-5 col-md-6 col-lg-7">A</div>
    <div class="well col-xs-8 col-sm-7 col-md-6 col-lg-5">B</div>   
</div>

在4种不同的尺寸（xs，sm，md和lg）下，div A和B的列尺寸都会发生变化。

xs（超小）将是4/8分割
sm（小）将是5/7分裂
md（中）将是6/6分裂
lg（大）将是7/5分裂

这使得随着屏幕宽度的变化，显示不同的布局变得非常容易。

（我添加了额外的“well”类，以便您更容易看到布局发生变化......）

Answer 2

对于中等网格（col-md-），该点将添加992px（另请参阅http://getbootstrap.com/css/#grid-options处的表格）。此时要做一些css使用媒体查询（参见：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）

Todo此时的一些javascript会更复杂。使用$(window).resize()，您可以找到屏幕的当前大小（$(window),width）但是要触发操作，您需要完全按照要点操作，或者让您的操作触发每个屏幕上的调整大小。您可以尝试设置一个类似的布尔值：

var action == false
$(window).resize(function()
    { 
         if(!action && $(window).resize()<992){ yourcation(); action=true; } 
         elseif(action && $(window).resize()>=992) {action=false; }
    });

您还可以使用Enquire.js（https://github.com/WickyNilliams/enquire.js/）来使用javascript响应CSS媒体查询。有关示例，另请参阅http://bassjobsen.weblogs.fm/responsive-banner-ads-2/。

知道列堆栈引导程序的大小

2 个答案: