使用 twitter 引导向导单击“下一个”V 形时，我在控制台中收到“TypeError：容器未定义”错误。尽管出现错误，向导仍会显示下一个选项卡。是什么导致了这个错误？
Firefox 59.0.2 控制台错误：
bootstrap.js:3768:
小提琴：https ://jsfiddle.net/dlo33/8hw5t4j8
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#wizard">Launch</button>
<div id="wizard" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body welcome-modal-body">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab4" data-toggle="tab">Tab 4</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-danger progress-striped active">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="1" aria-valuemax="100" style="width: 0%"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<h3>Some text in tab 1</h3>
</div>
<div class="tab-pane" id="tab2">
<h3>Some text in tab 2</h3>
</div>
<div class="tab-pane" id="tab3">
<h3>Some text in tab 3</h3>
</div>
<div class="tab-pane" id="tab4">
<h3>Some text in tab 4</h3>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between welcome-modal-footer">
<button id="button-previous" type="button" class="btn button-previous mr-auto" name='previous' value='Previous'><span class="fa fa-chevron-left"></span></button>
<button id="button-next" type="button" class="btn button-next ml-auto" name='next' value='Next' data-toggle="tab"><span class="fa fa-chevron-right"></span></button>
<button id="button-finish" type="submit" class="btn button-finish ml-auto" name='finish' value='Finish'>Finish</button>
</div>
</div>
</div>
</div>
JS
// set up navigation buttons
var next = document.getElementById("wizard").getElementsByClassName("button-next");
var previous = document.getElementById("wizard").getElementsByClassName("button-previous");
var finish = document.getElementById("wizard").getElementsByClassName("button-finish");
// set up bootstrap wizard
$('#rootwizard').bootstrapWizard({
'nextSelector': next,
'previousSelector': previous,
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
if ($percent === 0) {
$percent = (1 / $total) * 100;
}
$('#rootwizard .progress-bar').css({
width: $percent + '%'
});
if ($current <= 1) {
$(previous).add(finish).css({
'display': 'none'
});
$(next).css({
'display': 'block'
});
$(next).removeClass('disabled');
} else if ($current < $total) {
$(previous).add(next).css({
'display': 'block'
});
$(finish).css({
'display': 'none'
});
} else {
$(next).css({
'display': 'none'
});
$(previous).add(finish).css({
'display': 'block'
});
}
}
});
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills'
});
$('#welcomeWizard').modal('show');
chrome 66.0.3359.139 中的小提琴错误：
