如何使此嚮導響應？

我試圖使用本作品如何使此嚮導響應？

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', ''); 
    },

來源

2016-05-31 jechaviz

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

來源

2016-06-01 16:00:34

如何使此嚮導響應？

回答

相關問題