问题

Question

我的管理页面中有<div>，我想向用户介绍<div>在桌面/手机/ iPad等界面的样子......

问题

当更改div的宽度和宽度时，<div>不会使col-md-4相互折叠。高度，而不是列缩小，但保持在同一行。

如果我手动更改浏览器的宽度 - 它们会相互折叠。这是因为视口 - 实际上正在改变，与浏览器全屏时相比，我只是手动缩小div的宽度。

我怎样才能让它发挥作用？

编辑 - 在CodePen中添加示例

在尝试示例时，请查看点击图标与缩小浏览器本身之间的区别

缩小div，col-md-4只会使每个col的宽度变小
VS。使用鼠标更改浏览器窗口，使块在彼此之上折叠
它在真实设备上运行正常，我只想在<div>

html（Bootstrap＆amp; jQuery）

<div class="container-fluid">
  <h3 class="text-center screen_change">
    <div>
        <i class="fa fa-fw fa-3x fa-tablet"         onclick="activate_device('tablet');"></i>
        <i class="fa fa-fw fa-3x fa-desktop active" onclick="activate_device('desktop');"></i>
        <i class="fa fa-fw fa-3x fa-mobile"         onclick="activate_device('mobile');"></i>
    </div>     
  </h3>

  <div class="row grid_to_change">

    <div class="col-md-4">
      <button type="button" class="btn btn-primary">A</button>
    </div>
    <div class="col-md-4">
      <button type="button" class="btn btn-warning">B</button>
    </div>
    <div class="col-md-4">
      <button type="button" class="btn btn-success">C</button>
    </div>

  </div>
</div>

CSS（LESS）

.screen_change {
  .fa {
    cursor: pointer;

    &.active {
      border-bottom: #236B90 5px solid;
    }
  }
}

.grid_to_change {
  border: #444 2px solid;
}

JS（Bootstrap＆amp; jQuery）

var SCREEN_SIZES = [
    { device: 'tablet',  width: '1024',   height: '768'  },
    { device: 'desktop', width: "100%",   height: "auto" },
    { device: 'mobile',  width: '480',    height: '800'  } 
];

function WxH(args) {
        // Change Width x Height
        // args = { width: X, height: Y }

        $('.grid_to_change').animate({ 
          width: args.width, 
          height: args.height 
        }, 500, function() {
            if ( args.height == "auto" )
                $(this).removeAttr('style');
        });        
    }


function activate_device (which_device) {

   // Seek fot the supported device
        var which_device = SCREEN_SIZES.filter(function(x){  return x.device == which_device; })[0];

        if ( ! which_device ) {
            console.error("Unable to find a support device: ", which_device);
            return;
        }       

        // - Make all other devices non-active
        $('.screen_change .fa').removeClass("active");

        // - Activate the chosen device's CSS
        $('.screen_change .fa-' + which_device.device).addClass("active");

        // - Change the display dimensions to the one requested
        WxH(which_device);
}

http://codepen.io/anon/pen/bwAzLw

有什么想法吗？

Answer 1

您无法在不影响整个页面的情况下更改元视口标记。

您可以编写一些代码来获取您想要显示的CSS文件，通过它读取除了您想要的部分之外的任何内容（例如，移动维度），并将该修改后的版本与加载在div中的页面一起使用。

在div元素上模拟移动/桌面/ ipad不起作用

问题

编辑 - 在CodePen中添加示例

1 个答案: