自举应用程序向导中的滚动条

• Z时代
• 2024-01-10
• 分类：问答

我已经实现了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-发生这种情况：

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

回答：

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

以上是 自举应用程序向导中的滚动条 的全部内容， 来源链接： utcz.com/qa/266915.html