Question

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

我试图调整这三个＆＃34; Bootstrap缩略图自定义内容＆＃34;元素彼此相邻，但我不知道如何：http://imgur.com/NChc9UA

我基本上需要让它看起来像在他们的网站上一样：http://getbootstrap.com/components/#thumbnails

这是我的代码：

<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 class="row">
<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 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>

再次，这真的是新的，所以请尝试彻底解释。不确定这是HTML还是CSS问题。

感谢您的帮助。

Answer 1

如果您注意到，上面三个代码段中的每个代码段都有相同的父容器，即<div class="row">。 .row div是一个块级元素，宽度为100%，这就是为什么您的三列不能在一行中对齐的原因。您可以做的是将三列包装在一个<div class="row">中，如下所示：

<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>

此外，在您上面发布的代码中，您遗漏了很多结束</div>代码。

这是使用您的代码的演示（查看整页）：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<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>

＆＃13;

<强> jsFiddle Demo

尝试并排放置多个Bootstrap Thumbnails

1 个答案: