Как сделать этого мастера отзывчивым?

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