Возникли проблемы с 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 <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 <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? */
}
Это последняя попытка (с использованием авто, которая не приносит пользы), установка ее на определенную высоту не очень полезна, так как в некоторых сгенерированных строках не будет изображений, и я просто закончу с большим количеством пустое пространство, и определение правильной высоты ... мягко говоря, сложно ... наличие дополнительного текста под изображениями выбрасывает вещи, потому что это может быть коротким или довольно длинным в каждом конкретном случае. Мне действительно нужно, чтобы строка была гибкой по высоте, чтобы строка под ней не появлялась над изображениями на небольших экранах. Я потратил на это часы и был в тупике.