javascript - 在更改 div 宽度时更改视口(viewport)

Question

我的应用程序中有一个表单设计器，出于用户体验的目的，我需要为用户提供更改视口(viewport)并查看表单在实际表单中的外观的能力。

我正在使用 bootstrap 3 来塑造表单并使用 col 和 row 类来管理布局。窗体中有 4 个带有视口(viewport)图标的按钮，例如 Desktop 、 Tablet 、 Tablet-Horizo​​ntal 、 Mobile 。

当用户单击这些按钮时，我将所需的类添加到我的容器 div 中，并使用 width 属性调整它的大小。但是当我 Bootstrap 没有检测到并且不响应 div 更改时，因为它适用于窗口宽度(如媒体查询)。

这是CSS:

.edit__container {
    &.container--lg {
        width: 100%;
    }

    &.container--md {
        width: 80%;
    }

    &.container--sm {
        width: 60%;
    }

    &.container--xs {
        width: 30%;
    }
}

我尝试用 javascript 更改视口(viewport)元标记并将宽度设置为 200 或更多，但不起作用。

另一个尝试是用 jquery 改变窗口宽度，但没有成功。

请记住，我不能在表单中使用 iframe。

Answer 1

您可以向父级添加一些类并覆盖该范围内的 Bootstrap 类。
例如:

.edit__container {

    &.container--xs {
        width: 30%;


        @for $i from 1 to 12 {
        .col-md-#{$i} {
                width:100%;
            }
        }

    }
}

为 col-sm, col-lg 等等做...