【发布时间】：2018-07-12 07:23:48
【问题描述】：
我有一个这样的小部件：
<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 列网格，但我希望它是堆叠格式（移动视图 col-xs），适用于所有响应宽度
我怎样才能实现它
我尝试将宽度 100% 设置为 embedWidget（内容在该区域中固定为 4 col 网格）
【问题讨论】：
-
使用引导 col 类应该可以工作......也许你需要添加 de "row" 类，而不是直接嵌套 "col-" div。
-
我试过
container->row->col-md-12->col-md-3->widgetCode但没有运气 -
在您的小部件中，您正在使用 col-md-4 col-xs-12，所有视图请更改为 col-xs-12。事实上，您不必在小部件内使用 Grid 结构，因为您希望列堆叠，只需使用块元素 div
-
@CharuMaheshwari 这就是我的挑战所在。！在一个页面中，我需要相同格式的小部件但在另一个页面中，我需要堆叠视图。有没有可能..？
-
那么在这种情况下，我能想到的最好的方法是应用 css hack...当您必须始终显示堆叠时，只需应用包装类 embedWidget-2 并覆盖所有网格该层次结构内的结构...embedWidget -> col-md-4 : Width 100% !important.
标签： javascript html css responsive-design servicenow