如何使此向导响应？

我试图使用本作品如何使此向导响应？

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

如何使此向导响应？

回答

相关问题