这是我的 Bootstrap Tour 正在处理的 HTML：
<body class="top-navigation">
<div id="wrapper">
<div id="page-wrapper">
<div class="row border-bottom">
<nav class="navbar navbar-static-top">
<div class="navbar-header">
<a href="/">
<img class="navbar-brand" alt="image" src="logo.png" />
</a>
<form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
<input type="text" name="q" id="top-search" class="form-control"/>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<a class="coach-dashboard" href="/dashboard">
<i class="fa fa-dashboard"></i> My Dashboard
</a>
</li>
<li>
<a class="my-favorites" href="/profiles?filter=favorites">
<i class="fa fa-list"></i> My Favorites
</a>
</li>
<li>
<a class="settings" href="/users/registration/edit">
<i class="fa fa-sliders"></i> My Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="row wrapper border-bottom gray-bg page-heading">
<h2><span class="num-players">14 Players - Tryouts One 2016</span</h2>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="contact-box profile-24">
<a href="/profiles/24">
<div class="col-lg-offset-1 col-lg-4 col-xs-4">
<div class="text-center">
<img alt="image" src="profile-24.jpg" />
Age: 30
</div>
</div>
<div class="col-lg-offset-1 col-lg-6 col-xs-8">
<h3><strong>Jimmy Choos</strong></h3>
<address>
<strong>St. George's College</strong><br>
Grade: <br>
Height: N/A<br>
Weight: N/A<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
这是触发游览的 JS：
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
steps: [
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "div.page-heading h2 span.num-players",
title: "Number of Players",
content: "This is the number of players are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-<%= @profiles.first.id %>',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
</script>
以下是旅游在背景下的样子：
这是正确呈现的：
这两个未正确呈现，突出显示的元素不可见：
如何让所有元素像顶部一样呈现，突出显示的元素可见？
编辑 1
这是一个显示行为的 JSFiddle：
https://jsfiddle.net/nrkry27p/
具体来说，请注意第二步，它不会像演示中的搜索那样突出显示。除了在我的真实代码中，搜索不会突出显示......但您应该能够了解正在发生的事情。
最终编辑
经过多轮编辑，不断的来来回回，我们终于弄明白了。因此，我决定清理所有对理解问题和解决方案并没有真正增加价值的编辑。