twitter-bootstrap - 知道列堆栈引导的大小是多少

Question

我有 2 列col-md-8and 和col-md-4，我调整窗口的大小直到扩展，col-md-4堆叠在底部，我想做那个大小的东西..

Answer 1

对于中网格 (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/。

Answer 2

这真的取决于你想做什么，并且需要更好地理解新的 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”类，让您更容易看到发生的布局更改......）