javascript - Bootstrap 应用程序向导中的滚动条

Question

我已经实现了 bootstrap application wizard它工作得很好，但在这种情况下我如何向每个页面或卡片添加滚动条？

这是不包含溢出的模态卡片窗口:

这是我为滚动条添加代码的 css 文件:

/* WIZARD GENERAL */
.wizard {
        display:none;        
}

.wizard-dialog {}
.wizard-content {}

.wizard-body {
        padding: 0;
    height: 1500px;
        margin: 0;
     overflow-y: scroll;
}

/* WIZARD HEADER */
.wizard-header {
        padding: 9px 15px;
        border-bottom: 0;    

}

.wizard-header h3 {
        margin: 0;
        line-height: 35px;
        display: inline;
        font-family: 'Segoe UI';
        font-family: inherit;
        font-weight: bold;
        text-rendering: optimizelegibility;
        color: #030845;
}

.wizard-subtitle {
        font-weight:bold;
        color:#AFAFAF;
        padding-left:20px;
}


/* WIZARD NAVIGATION */
.wizard-steps {
        width: 28%;
        background-color: #f5f5f5;
        border-bottom-left-radius: 6px;
        position: relative;
}

.wizard-nav-container {
        padding-bottom: 30px;
    overflow-y: scroll;
}

.wizard-nav-list {
        margin-bottom: 0;
}

.wizard-nav-link .glyphicon-chevron-right {
        float:right;
        margin-top:12px;
        margin-right:-6px;
        opacity:.25;
}

li.wizard-nav-item.active .glyphicon-chevron-right {
        opacity:1;
}

li.wizard-nav-item {
        line-height:40px;
}

.wizard-nav-list > li > a {
        background-color:#f5f5f5;
        padding:3px 15px 3px 20px;
        cursor:default;
        color:#B4B4B4;
}

.wizard-nav-list > li > a:hover {
        background-color: transparent;
}

.wizard-nav-list > li.already-visited > a.wizard-nav-link {
        color:#030845;
        cursor:pointer;
}

.wizard-nav-list > li.active > a.wizard-nav-link {
        color:white;
}

.wizard-nav-item .already-visited .active {
        background-color:#030845;
}

.wizard-nav-list li.active > a {
        background-color:#030845;
}


/* WIZARD CONTENT */
.wizard-body form {
        padding: 0;
        margin: 0;
    height: auto;
}

/* WIZARD PROGRESS BAR */
.wizard-progress-container {
        margin-top: 20px;
        padding: 15px;
        width: 100%;
        position: absolute;
        bottom: 0;
}

.wizard-card-container {
        margin-left: 28%;
}

/* WIZARD CARDS */
.wizard-error,
.wizard-failure,
.wizard-success,
.wizard-loading,
.wizard-card {
        border-top: 1px solid #EEE;
        display:none;
        padding:35px;
        padding-top:10px;
        overflow-y:auto;

        /*
        position:relative;
        height:300px;
        margin-right: 5px;
        */
}

.wizard-card-overlay {
        overflow-y: initial;
}

.wizard-card > h3 {
        margin-top:0;
        margin-bottom:20px;
        font-size:21px;
        line-height:40px;
        font-weight:normal;
}

/* WIZARD FOOTER */
.wizard-footer {
        padding:0;
}

.wizard-buttons-container {
        padding:20px;
}

.wizard-cancel {
        margin-left: 12px;
}

/* Inner Card */
.wizard-input-section {
        margin-bottom:20px;
}

.wizard-dialog .popover.error-popover {
        background-color:#F2DEDE;
        color:#B94A48;
        border-color:#953B39;
}

.wizard-dialog .popover.error-popover .arrow::after {
        border-right-color:#F2DEDE;
}

.wizard-dialog .popover.error-popover .popover-title {
        display:none;
}

.wizard-dialog .popover.error-popover .arrow {
        border-right-color:#953B39;
}

当我添加 overflow-y 时，会发生这种情况:

它似乎以正确的方式显示滚动条，但它也推高了导航按钮。关于如何解决这个问题的任何想法都会很有帮助。

Answer 1

您需要在容器上设置高度和溢出。

.wizard-card-container {
    height: 300px;
    overflow-y: scroll;
}