更改 div 宽度时更改视口

Question

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

我正在使用 bootstrap 3 来塑造表单并使用列和行 classes 来管理布局。窗体中有 4 个带有视口图标的按钮，例如 Desktop 、 Tablet 、 Tablet-Horizontal 、 Mobile 。

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

这里是 css:

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

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

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

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

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

另一种尝试是用 jquery 更改 window 宽度，但没有成功。

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

Answer 1

尝试添加 !important 以覆盖 bootstrap 宽度例如 jQuery

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

Answer 2

您可以向您的父级添加一些 class 并覆盖该范围内的 bootstrap classes。
例如：

.edit__container {

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


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

    }
}

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

更改 div 宽度时更改视口

Change viewport on changing a div width

html

javascript

jquery

viewport

twitter-bootstrap