divの幅を変更するとビューポートを変更します

Question

私は自分のアプリケーションにフォームデザイナーを持っていて、ユーザーエクスペリエンスのために、ユーザーにビューポートを変更してフォームが実際のフォームのように見えるようにする必要があります。

私はブートストラップ3を使用してフォームをシェイプし、colおよびrowクラスを使用してレイアウトを管理しています。フォーム、デスクトップ、タブレット、タブレット - 水平、モバイルなどのビューポートのアイコンを持つ4つのボタンがあります。

ユーザーがこれらのボタンをクリックすると、希望のクラスをコンテナdivに追加し、widthプロパティでサイズを変更します。しかし、私はブートストラップがそれを検出せず、ウィンドウ幅（メディアクエリのような）で動作するので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

お試しください！重要なのjQuery

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