我正在尝试在引导模态的主体中制作一排3-5张带有标题的图像。我已多次尝试过，但我似乎无法弄清楚它为什么不起作用......这就是我正在使用的代码。
发生的事情是图片没有内嵌显示，而是只是叠加在一起。我希望他们在主视频下面排成一排。
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title tut-title" id="tutorialModal"></h4>
</div>
<div class="modal-body">
<iframe class="tut-vid" width="865" height="480" src="" allowfullscreen></iframe>
<!-- Original Ratio Scaled to width="853" height="480" -->
<p class="Pack-Quote">
<!-- Enter Tutorial Description here. (If suitable) -->
</p>
</div>
<!-- Try making these buttons control the Prev. and Next buttons for the Youtube playlist the current video is in -->
<div class="modal-footer">
<!-- This section will be used as a "Suggested Video Display" showing multiple thumbnails that are relatable to the video, or have been manually added. -->
<div class="row">
<div class "col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class "col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class "col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class "col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
</div>
<a href="#" class="btn btn-primary align-left" role="button"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Previous Tutorial</a>
<a href="#" class="btn btn-primary align-right" role="button">Next Tutorial<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
尝试在每一个中执行此操作，然后告诉我发生了什么
<div class "col-xs-6 col-md-3" style="float:left;">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
答案 1 :(得分：0)
<div class="modal fade bs-example-modal-lg" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title tut-title" id="tutorialModal"></h4>
</div>
<div class="modal-body">
<iframe class="tut-vid" width="865" height="480" src="" allowfullscreen></iframe>
<!-- Original Ratio Scaled to width="853" height="480" -->
<p class="Pack-Quote">
<!-- Enter Tutorial Description here. (If suitable) -->
</p>
</div>
<!-- Try making these buttons control the Prev. and Next buttons for the Youtube playlist the current video is in -->
<div class="modal-footer">
<!-- This section will be used as a "Suggested Video Display" showing multiple thumbnails that are relatable to the video, or have been manually added. -->
<div class="row">
<div class = "col-xs-3" style="float:left;">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class = "col-xs-3" style="float:left;">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class = "col-xs-3" style="float:left;">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class = "col-xs-3" style="float:left;">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
</div>
<a href="#" class="btn btn-primary align-left" role="button"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Previous Tutorial</a>
<a href="#" class="btn btn-primary align-right" role="button">Next Tutorial<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
好的，所以我犯了一个愚蠢的错误，因为在每个div div的div类之后没有添加=。
为了指示目的，下面的代码将使它在bootstrap模式中成为一行4个缩略图。将以下代码放在模式的<div class="modal-header">，<div class="modal-body">或<div class="modal-footer">中，以便正确显示内容。
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here...">
<h5>Tutorial</h5>
<img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110">
</a>
</div>
</div>
如果你想要的只是一行图像，只需用以下内容替换每一列。
<div class="col-xs-6 col-md-3">
<img src="Your image URL goes here" alt="Visual impared Text goes here">
</div>