Question

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

我正在使用bootstrap 3来整形表单并使用col和row类来管理布局。表单中有4个按钮，带有视口图标，如桌面，平板电脑，平板电脑，水平，移动。

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

这是css：

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

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

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

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

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

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

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

Answer 1

您可以向父级添加一些类，并覆盖该范围内的引导类例如：

.edit__container {

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


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

    }
}

为col-sm，col-lg执行此操作等等...

Answer 2

尝试添加！important以覆盖引导程序宽度例如使用jQuery

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

更改视口以更改div宽度

2 个答案: