更改視口以更改div寬度

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;");