Html 尝试并排放置多个引导缩略图

参加一门初级HTML/Bootstrap/CSS等课程，所以我对这一切都很陌生

我试图将这三个“引导缩略图自定义内容”元素相邻对齐，但我不知道如何对齐：

我基本上需要让它看起来像在他们的网站上：

这是我的密码：

<div class="row">
  <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/obliviontn.jpg" alt="Oblivion">
  <div class="caption">
    <h3>Let's Play Oblivion</h3>
    <p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
      <p><a href="https://www.youtube.com/watch?v=FYyV2nZW8iY&list=PLdx-MmfUterzswiJmybySBgyjMvpHFz9z" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>

让我们玩遗忘游戏
格罗瓦纳最受欢迎的系列之一，《让我们来玩奥伯维翁》是一部长篇LP，在贝塞斯达史诗般的《第四长老卷轴》标题中探讨了塔米瑞尔

Skyrim隐藏的宝藏
Grohlvana最受欢迎和独特的系列，Skyrim的隐藏宝藏探索了第五长老卷轴游戏中与任何特定任务无关的位置

让我们玩“辐射尘3”
当前正在进行中，让我们在格罗瓦纳频道播放。看着杰克在这片荒地上搜寻，希望能拯救那里的各种各样的居民

再次强调，这是一个全新的概念，请尝试彻底解释。不确定这是HTML还是CSS问题

---

谢谢您的帮助。

如果您注意到，上面的三个代码片段都有相同的父容器，即

。

.row

div是一个块级元素，具有

100%

宽度，这就是为什么三列不能在一行中对齐的原因。您可以做的是将您的三列封装在一个

中，如下所示：

<div class="row">
  <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/obliviontn.jpg" alt="Oblivion">
  <div class="caption">
    <h3>Let's Play Oblivion</h3>
    <p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
      <p><a href="https://www.youtube.com/watch?v=FYyV2nZW8iY&list=PLdx-MmfUterzswiJmybySBgyjMvpHFz9z" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>
  </div>
  <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/fallout3tn.jpg" alt="Fallout 3">
  <div class="caption">
    <h3>Let's Play Fallout 3</h3>
    <p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
      <p><a href="https://www.youtube.com/watch?v=UsMUfLUhZRQ&list=PLdx-MmfUterxl_AGBOuGlpH12IblhfIA3" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/skyrimtn.jpg" alt="Skyrim">
  <div class="caption">
    <h3>Skyrim's Hidden Treasures</h3>
    <p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
      <p><a href="https://www.youtube.com/watch?v=GlPlCvL5_Cs&list=PLdx-MmfUterznXKI4OVdE_N4fgusyD2LQ" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>
</div>
</div>

让我们玩遗忘游戏
格罗瓦纳最受欢迎的系列之一，《让我们来玩奥伯维翁》是一部长篇LP，在贝塞斯达史诗般的《第四长老卷轴》标题中探讨了塔米瑞尔


让我们玩“辐射尘3”
当前正在进行中，让我们在格罗瓦纳频道播放。看着杰克在这片荒地上搜寻，希望能拯救那里的各种各样的居民


Skyrim隐藏的宝藏
Grohlvana最受欢迎和独特的系列，Skyrim的隐藏宝藏探索了第五长老卷轴游戏中与任何特定任务无关的位置

另外，在您上面发布的代码中，您丢失了许多结束标记

---

下面是一个使用您的代码的演示（以整页形式查看）：

让我们玩遗忘游戏
格罗瓦纳最受欢迎的系列之一，《让我们来玩奥伯维翁》是一部长篇LP，在贝塞斯达史诗般的《第四长老卷轴》标题中探讨了塔米瑞尔



让我们玩“辐射尘3”
当前正在进行中，让我们在格罗瓦纳频道播放。看着杰克在这片荒地上搜寻，希望能拯救那里的各种各样的居民



Skyrim隐藏的宝藏
Grohlvana最受欢迎和独特的系列，Skyrim的隐藏宝藏探索了第五长老卷轴游戏中与任何特定任务无关的位置

我相信没什么好担心的，因为

&

是YouTube的URL结构的一部分，你不能修改它。所以我认为你的教授不会有任何问题。只要你的html/css中没有任何错误，你就可以走了。是的，不幸的是，他甚至不接受作业，除非作业通过，而且它将作业视为错误，所以他不会接受。我想我会链接到单个视频而不是播放列表。是的，你也可以这样做。顺便说一下，请将我的答案标记为正确，这样用户就可以知道您的问题已经得到了回答。谢谢你。我是，但是我找不到任何选择，尽管我找到了。

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/fallout3tn.jpg" alt="Fallout 3">
  <div class="caption">
    <h3>Let's Play Fallout 3</h3>
    <p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
      <p><a href="https://www.youtube.com/watch?v=UsMUfLUhZRQ&list=PLdx-MmfUterxl_AGBOuGlpH12IblhfIA3" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/obliviontn.jpg" alt="Oblivion">
  <div class="caption">
    <h3>Let's Play Oblivion</h3>
    <p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
      <p><a href="https://www.youtube.com/watch?v=FYyV2nZW8iY&list=PLdx-MmfUterzswiJmybySBgyjMvpHFz9z" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>
  </div>
  <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/fallout3tn.jpg" alt="Fallout 3">
  <div class="caption">
    <h3>Let's Play Fallout 3</h3>
    <p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
      <p><a href="https://www.youtube.com/watch?v=UsMUfLUhZRQ&list=PLdx-MmfUterxl_AGBOuGlpH12IblhfIA3" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img src="images/skyrimtn.jpg" alt="Skyrim">
  <div class="caption">
    <h3>Skyrim's Hidden Treasures</h3>
    <p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
      <p><a href="https://www.youtube.com/watch?v=GlPlCvL5_Cs&list=PLdx-MmfUterznXKI4OVdE_N4fgusyD2LQ" class="btn btn-primary" role="button">Watch</a></p>
  </div>
</div>
</div>
</div>