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

如何使这个向导响应？

1 个答案: