代码之家 › 专栏 › 技术社区 › Mr world wide

修复桌面上div的移动视图

servicenow responsive-design css html javascript

Mr world wide · 技术社区 · 6 年前

我有一个这样的小部件:

<div class="col-md-12 col-xs-12">
    <div class="col-md-4 col-xs-12">
        1
    </div>
    <div class="col-md-4 col-xs-12">
        2
    </div>
    <div class="col-md-4 col-xs-12">
        3
    </div>
    <div class="col-md-4 col-xs-12">
        4
    </div>
</div>

我正在像这样嵌入上面的小部件

<div class="container">
    <div class="col-md-12">
        <div class="col-md-3 embedWidget">
            <!-- embeeded-widget-comes-here -->
        </div>
        <div class="col-md-9">
            <!-- some other imp content here -->
        </div>
    </div>  
</div>

当我这样做时,我的小部件显示为4列网格,但我希望它是堆叠格式(mobile view col xs),用于所有响应宽度

我怎样才能做到

我试着用100%的宽度 embedWidget (内容在该区域中固定为4个CL网格)