このウィザードを反応させるにはどうすればよいですか？

Question

私は、ウィザードを作成するには、この作品

Bootstrap Application Wizard Hosted in Github

を使用しようとしているが、私は、フル幅と応答ウィザードを必要としています。

文書では、contentHeightとcontentWidthはウィザードのサイズを変更するプロパティですが、ピクセル単位であり、パーセンテージではありません。

私はいくつかのCSSでモーダルにクラスを追加しようとしましたが、次元がjsで計算されるため失敗しました。どんな助けもありがとう。

Github Demo

Github Js

My Jsfiddle

スニペット変更する：

autoDimensions: function() { 
     // DO NOT REMOVE DISPLAY ; Temporary display is required for calculation 
     this.modal.css('display', 'block'); 

     this.dimensions.header = this.header.outerHeight(true); 

     // Navigation Pane is dyanmic build on card content 
     // Navigation Pane === BASE Inner Content Height 
     this.dimensions.navigation = this.wizardSteps.outerHeight(true); 
     if (this.dimensions.navigation < this.dimensions.contentHeight) { 
      this.dimensions.navigation = this.dimensions.contentHeight; 
      this.navContainer.height((this.dimensions.contentHeight-30) - this.progressContainer.outerHeight(true)); 
     } 

     // Dimension Alias (Body Height === (Navigation Height)) 
     this.dimensions.body = this.dimensions.navigation; 

     // Apply OuterHeight of navigation to it's parent wizardSteps 
     this.wizardSteps.height(this.dimensions.body); 

     // Modal Height === (Header + Content) 
     this.dimensions.modal = (this.dimensions.header + this.dimensions.navigation); 
     this.content.height(this.dimensions.modal + 'px'); 
     this.dialog.width(this.dimensions.contentWidth); 

     this.body.height(this.dimensions.body + 'px'); 
     this.wizardCards.height(this.dimensions.body + 'px'); 

     // Footer Height 
     this.dimensions.footer = this.footer.outerHeight(true); 

     // Card Container === (Body - Footer) 
     this.dimensions.cardContainer = (this.dimensions.body - this.dimensions.footer); 
     this.wizardCardContainer.height(this.dimensions.cardContainer); 

     // Reposition 
     this.dimensions.offset = ($(window).height() - this.dialog.height())/2;   
     this.dialog.css({ 
      'margin-top': this.dimensions.offset + 'px', 
      'padding-top': 0 
     }); 

     // DO NOT REMOVE NEXT LINE 
     this.modal.css('display', ''); 
    }, 

Answer 1

/src/bootstrap-wizard.jsで：

• コメント// this.dialog.width(this.dimensions.contentWidth);私たちのモーダルが応答性で、幅を設定しないようにしたいからです。
• 削除'margin-top': this.dimensions.offset + 'px',これはメディアクエリに置き換えることができます。
• container: el.parents('.form-group')の後にplacement: 'top'を加えます。これがなければ、デフォルトのポップオーバー動作は、接続されているコントロールの右側に表示されます。小さな画面では、画面外に表示されます。

  var popover = el.popover({ 
      content: msg, 
      trigger: "manual", 
      html: allowHtml, 
      container: el.parents('.form-group'), 
      placement: 'top' 
  }).addClass("error-popover").popover("show").next(".popover"); 
  

  ：それは次のように読み込む

は、（最初​​の行の末尾に昏睡に注意してください）