自舉應用程序嚮導中的滾動條

我已經實現了bootstrap application wizard，它的工作原理非常棒，但在這種情況下，如何在每個頁面或卡片上添加滾動條？自舉應用程序嚮導中的滾動條

這裏是沒有溢出模態窗口卡包括：

enter image description here

這裏是我添加的滾動條代碼的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-發生這種情況：

enter image description here

它似乎顯示滾動條正確的方式，但它也推動導航按鈕。任何想法如何解決這個問題真的有幫助。

來源

2014-02-17 CSharpDev4Evr

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

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

來源

2014-02-18 00:12:39

完美！非常感謝！ – CSharpDev4Evr

自舉應用程序嚮導中的滾動條

回答

相關問題