在Bootstrap Grid System中使用img的问题

Question

我正在使用基本的网格系统创建一个小的“ Portfolio”，在其中放置图像（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>

但是网格没有显示在行和列中。 （仅在列中显示），我如何使其工作？ （示例图片在https://imgur.com/fzGHM0X

谢谢。

Answer 1

您需要在台式机上使用<div class="col-lg-3">进行4列布局。

Answer 2

尝试一下：

Pen Here

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

Answer 3

您的代码：

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

怎么了？

1. 某些开始<div class="col-sm">标签是结束标签</div class="col-sm">，/的意思是开始标签是结束标签

2. 容器和行缺少两个结束标签</div>

3. 在col-sm类名的末尾缺少数字，这使得 我们想要记住每行必须加到12的列 您将所有col-sm至col-sm-4设为3列3乘以4是 12这样就可以了

sm中的col-sm将使列堆叠在一个小屏幕上，如果您不希望列堆叠进行col-[enter col size]

这是网格的外观，您可以转到bootstrap grid system了解更多信息

工作代码：

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