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网格，行和列中。通过执行此操作，并将一张桌子移动到稍有不同的位置，我可以按照所需的方式主要进行操作（似乎无法使缩略图缩小很多，但是我我仍然在寻找CSS）。

Bootstrap 4，嵌套表，图像周围的文字换行

1 个答案: