html - Bootstrap 4、嵌套表格、文本环绕图像

Question

在使用 Bootstrap 和使页面响应时遇到一些困难。在常规浏览器屏幕上(在我的桌面上)，一切都很好。困难在于我有一个表格是页面的宽度(下面的代码片段)，有问题的表格行可能包含右侧的两个图像。表格的下一行包含一个嵌套表格，在较小的屏幕(如我的 iPhone)上，嵌套表格最终会在图像顶部显示文本。我曾尝试使用“clearfix”类，但这似乎并没有多大用处。我试图找到一种方法来强制页面在图像下方显示表格，而不是让文本在图像上方显示。

这需要一些工作，但这是我的一些代码的 HTML 看起来的样子(这是从 PHP 流出的，但生成的 HTML 是我在这里显示的)(整个事情太大而无法在此处发布):

<tr class='row_with_images' style='vertical-align: top;'>
   <td>
      <span class='WhoHeading'>Last Known Location:</span> Mists (Teufelberg)
     </td>
     <td align='center' style='vertical-align: top;' width='20%' rowspan='4'>
        <center>
              <img class='profile_image_thumbnail'
                          data-toggle='popover'
                          data-trigger='hover'
                          data-placement='left'
                          data-html='true'
                          data-content='<img class="profile_image_big img-fluid" src="http://history.westkingdom.org/Who/HeadShotPhotos/Ken_JuneCrown_2017_Megan.jpg" />'
src='http://history.westkingdom.org/Who/HeadShotPhotos/Ken_JuneCrown_2017_Megan.jpg' alt='' />
        </center>
       <p style='font-size: 1rem;'><i>Photographer: Megan nic Alister of Thornwood&nbsp;<a href='http://history.westkingdom.org/Who/individual.php?namecode=917' data-toggle='tooltip' data-placement='bottom' title='View Whos Who Entry' target=_blank><img src='http://history.westkingdom.org/SiteImages/information.png' /></a>,<br />Contributor: Hirsch von Henford&nbsp;<a href='http://history.westkingdom.org/Who/individual.php?namecode=9683' data-toggle='tooltip' data-placement='bottom' title='View Whos Who Entry' target=_blank><img src='http://history.westkingdom.org/SiteImages/information.png' /></a></i></p>
     </td>
<!-- end of photo -->
<td align='center' style='vertical-align: top;' width='20%' rowspan='4'>
        <center>
              <img class='arms_image_thumbnail img-fluid'
                                      data-toggle='popover'
                                      data-trigger='hover'
                                      data-placement='left'
                                      data-html='true'
                                      data-content='<img class="arms_image_big img-fluid" src="http://heralds.westkingdom.org/Awards/ArmsImages/HirschVonHenford.gif" />'
                                      src='http://heralds.westkingdom.org/Awards/ArmsImages/HirschVonHenford.gif' alt='' />
        </center>
        <br clear='all' />
        <p style='font-size: 1rem;'><i>Per pale Or and vert, two stag's heads erased respectant counterchanged.</i></p>
     </td>
  </tr>
<!-- this row (above) is the problem ... -->
<tr style='vertical-align: top;'>
     <td colspan='3' style='border:none;'>
        <span class='WhoHeading'>Awards Only <i>(maximum of 10)</i>:</span>
        <!-- Inner table for the awards themselves -->
        <table class='table-striped' style='border:none;'>
           <tr>
              <td>
                <abbr title="Excellence in the Arts and/or Sciences">Laurel [Magnifico]</abbr>, Jan 8, AS XVII (1983), Paul & Rowena (West)
              </td>
           </tr>
           <tr>
              <td>
                <abbr title="Great service to the Kingdom/SCA [Italian title]">Pelican [Magnifico]</abbr>, Jan 4, AS XXVI (1992), Radnor & Ysabeau (West)
              </td>
           </tr>
           <tr>
              <td>
                <abbr title="Grant-Level -- actions/contributions have helped shape/define the Kingdom.">Writ of Endorsement</abbr>, Jan 7, AS XLVI (2012), Rolf & Aurora (West)
              </td>
           </tr>
</table> 
</td></tr></table> 

我截断了嵌套表格，但你应该明白了......在更大的屏幕上一切都很好。在我的手机上，嵌套表格的文本显示在图像上。

我曾尝试使用 clearfix(如上所述)，但无济于事。我尝试在带有以下图像的行下添加一行:

<tr><td><br clear='all' /></td></tr>

这没有好处。

媒体查询中的 css 包括(同样，被截断了一点):

@media( max-width: 575.98px)
{
   .profile_image_thumbnail, .arms_image_thumbnail
   {
      background: white;
      /*margin-bottom: 0.5rem; /* 5px; */
      max-width: 10rem !important; /* 100px small size */
      max-height: 15rem !important; /* 150px; */
      margin: 0 !important; 
    }

   .popover
   {
      font-size: 1.0rem !important; /*10px !important;*/
      max-width: 30rem !important; /* 300px */
      margin: 0 !important; /*2px !important;*/ /* doesn't seem to do anything */
      padding: 0 !important;
      text-align: center !important;
   }

   .profile_image_outer, .arms_image_outer /* This is the outer div ... */
   {
      /* if screen is up to 575.98px (57.598rem;) wide ... */
      float: left !important;
      max-width: 20rem; /* 200px; */
      text-align: center;
      margin: 0 !important;
   }

   .profile_image_big, .arms_image_big
   {
      max-width: 20.0rem; /* 200px; */
      max-height: 30.0rem; /* 300px; */
      position: relative;
      margin: 0 !important; /* doesn't seem to do anything */
   }
}

我希望有人知道要在这里做什么。 Bootstrap 站点没有提供任何有用的信息，而且我已经在网上做了很多查找。我试图定义一个类“row_with_images”以在媒体查询中使用:

.row_with_images
{
   height: auto; /* room for text -- how to make this optional? */
}

这是最新的尝试(使用 auto，这没什么用)，将其设置为特定高度并不是很有用，因为生成的某些行将没有图像，我最终会得到很多空白，并且确定正确的高度是......困难的，委婉地说......在图像下方添加额外的文字会把事情搞砸，因为这可能很短或相当长，具体情况视具体情况而定。我真的需要该行的高度灵活，这样它下面的行就不会出现在较小屏幕上的图像上。我在这上面花了几个小时，但很困惑。

Answer 1

解决方案似乎是将所有内容移动到标准的 Bootstrap 4 网格、行和列中。通过这样做，并将一张 table 移动到稍微不同的位置，我能够让事情大部分按照我需要的方式工作(似乎无法让缩略图更小，但我我仍在为此寻找 CSS)。