Question

我想在引导程序表中显示两个彼此相邻的图像，任何想法？

继承代码，

   <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中，每个row分为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>

如果您想使用表格，请先阅读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>

Answer 2

您好，您可以尝试这个简单的代码来响应自举表，让我知道

<div class="table-responsive">
  <table class="table">
       <tbody>
      <tr>
        <td><img src="image1.jpg"></td>   
    <td><img src="image2.jpg"></td>       
      </tr>
    </tbody>
  </table>
  </div>

Answer 3

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

试试这个

Answer 4

您可以添加css

img{ display:inline-block; }

Answer 5

尝试一下：

<tr> 
    <th scope="row">7</th>
    <td></td>
    <td>
        <div class="d-flex flex-row flex-nowrap"> <!--div as flexbox with content in a row without wrap-->
            <div class="img img-responsive"> <!--responsive img inside div-->
                <img class="img img-fluid" src="example.jpg" alt="">
            </div>
            <div class="img img-responsive"> <!--responsive img inside div-->
                    <img class="img img-fluid" src="example.jpg" alt="">
            </div>
        </div>
     </td>
</tr>

在行引导表中显示img

5 个答案: