当改变一个div的宽度时，如何更改视口？

Question

我在我的应用程序中有一个表单设计器，为了用户体验的目的，我需要给用户这个能力来改变视口并查看表单在实际表单中的外观。

我正在使用Bootstrap 3来设计表单，并使用col和row类来管理布局。表单中有4个带有视口图标的按钮，如桌面，平板电脑，横向平板电脑和手机。

当用户点击这些按钮时，我会向容器div添加所需的类并使用宽度属性调整其大小。但是当窗口宽度发生变化时，Bootstrap不会检测到这些变化，也不会响应div的变化，因为它只会根据窗口宽度进行响应（例如媒体查询）。

下面是CSS样式：

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

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

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

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

我尝试用JavaScript更改viewport meta标签，并将宽度设置为200或更大，但不起作用。另一种尝试是使用jQuery更改窗口宽度，但没有成功。请注意，我不能在表单中使用iframe。

- M.R.Safari

Answer 1

您可以给父元素添加类，并在该作用域内覆盖Bootstrap类。
例如：

.edit__container {

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


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

    }
}

针对 col-sm、col-lg 等进行操作...

- Bagherani

Answer 2

尝试使用jQuery添加 !important 来覆盖bootstrap的宽度，例如：

$("Selector").css("cssText", "width: size% !important;");

- Ram Segev