css - 具有固定宽度内容的 bootstrap 3 网格

Question

我正在尝试使用 bootstrap 3 网格来设置一些响应行为:

我想要有两列，并且右侧的一列仅从某个最小宽度可见。

但是这个栏目里面应该有一张图片。

问题是图像有一些宽度 (339px)，如果它的宽度只能小于这个，我不希望包含它的列可见。

有没有办法让网格列在低于特定宽度时隐藏起来？

Answer 1

Bootstrap 使用 CSS 媒体查询来确定响应行为。媒体查询可用于检测视口(viewport)的宽度，但不能检测列等特定元素的宽度。所以，我认为您必须使用 jQuery 或 JavaScript 之类的东西来处理窗口调整大小事件并测试列的宽度。

 $(window).resize(function(){
   var ele = $('#myCol');
   if (ele.outerWidth()<339) {
        ele.hide();
   }
   else {
        ele.show();
   }
 });

http://www.bootply.com/120897