Html 将img与Bootstrap网格系统结合使用的问题

我使用一个基本的网格系统来创建一个小公文包，我把图像放在4列和大约6行中，看起来像这样

<div class="container">
  <div class="row">
   <div class="col-sm">
    <img src="url" alt="1st Event" height="200" width="200"/>
   </div>
   </div class="col-sm">
     <img src="url" alt="2nd Event" height="200" width="200"/>
   </div>
   </div class="col-sm">
     <img src="url" alt="3rd Event" height="200" width="200"/>
   </div>

但是网格不会显示在行和列中。它只显示在列中，我如何才能使它工作？ 示例图片在这里

谢谢。

试试这个：

您的代码：

<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="url" alt="1st Event" height="200" width="200"/>
    </div>
    </div class="col-sm">
      <img src="url" alt="2nd Event" height="200" width="200"/>
    </div>
    </div class="col-sm">
      <img src="url" alt="3rd Event" height="200" width="200"/>
    </div>

---

我已经用示例代码笔提供了答案。试试看。希望它能解决您的问题。是的：您必须关闭您的div，正如上面@rn92所示。引导代码在这方面是脆弱的。你错过了行闭包和容器闭包，正如你在这里看到的。我使用的是1920x1080分辨率，但即使在我的正常分辨率下也不起作用。即使我真的复制粘贴了你的代码，它也不会将你的代码这样的图像放在代码笔中。只是为了确保，你导入了所有相关的JS和CSS库了吗？实际上我只是在这里错误地重新编写了cose。我是否应该尝试编辑页面im编码的纵横比和分辨率？我在2017年macbook air上使用基本的safari浏览器，它不会以行和列的形式显示

<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="url" alt="1st Event" height="200" width="200"/>
    </div>
    </div class="col-sm">
      <img src="url" alt="2nd Event" height="200" width="200"/>
    </div>
    </div class="col-sm">
      <img src="url" alt="3rd Event" height="200" width="200"/>
    </div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img src="url" alt="1st Event" height="200" width="200"/>
    </div>
    <div class="col-sm-4">
      <img src="url" alt="2nd Event" height="200" width="200"/>
    </div>
    <div class="col-sm-4">
      <img src="url" alt="3rd Event" height="200" width="200"/>
    </div>
  </div>
</div>