css - 在行 Bootstrap 表中显示 img

Question

我想在 bootstrap 表中并排显示两个图像，有什么想法吗？

这是代码，

   <tr>
       <th scope="row">7</th>
       <td></td>
       <td>
            <img class="img" src="example.jpg" alt="">
            <img class="img" src="example.jpg" alt="">
        </td>
   </tr>

Answer 1

如果您想要并排显示图像，您可以使用 div 而不是 table，因为这是最佳实践。

在 Bootstrap 中，每一 行 被分成 12 列。你可以阅读this对于您对 Bootstrap 网格系统的澄清。您可以使用任何组合来设置图像。

6 + 6 = 12
4 + 4 + 4 = 12
3 + 3 + 3 + 3 = 12
-
-
etc

如果我们以 4 + 4 + 4 = 12 这个组合为例。我们将能够在任意两个 div 中设置图像。代码将是这样的:

<div class="row">
   <div class="col-md-4">
       <img class="img" src="example.jpg" alt="">
   </div>

   <div class="col-md-4">
       <img class="img" src="example.jpg" alt="">
   </div>

   <div class="col-md-4">

   </div>

</div>

如果要使用table，那么先阅读this文章。然后代码将如下所示:

<table>
   <th scope="row">7</th>
    <tr>
       <td>
          <img class="img" src="example.jpg" alt="">
       </td>
       <td>
          <img class="img" src="example.jpg" alt="">
       </td>
    </tr>
 </table>