当使屏幕较小时，为什么此引导文本与图像重叠
我使用的是Bootstrap 5.1和一个流体容器，对于这一行，我有两列，其中一列是一个
fullscreen时看起来还不错的：
，
但是如果我只是让窗口变得更小一点，文字覆盖了图像，即使右侧有很多未使用的空间
当屏幕较小时，为什么此bootstrap文本与映像重叠？
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row g-0">
<div class="col-3 m-2">
<img src="https://via.placeholder.com/400" class="figure-img border border-dark" width="400"
height="400">
</div>
<div class="col-8 m-2">
<div>
<div>
<span>
<label>
Album Artists
</label>
<span>
<a href="/artist.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Album Artists / Sting&cid=0$=Album_Artists$18649" class="h4" style="display:block">
Sting
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Genre
</label>
<span>
<a href="/genre.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Genres / Pop rock&cid=0$=Genre$17160" class="h4" style="display:block">
Pop rock
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Album Type
</label>
<span>
<a href="/albumtype.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Album Types / EP&cid=0$=MusicBrainz Album Type$14830" class="h4" style="display:block">
EP
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Label
</label>
<span>
<a href="/container.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Labels / A&M Records&cid=0$=Label$18525" class="h4" style="display:block">
A&M Records
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Year
</label>
<span>
<a href="/container.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Years / 1988&cid=0$=Date$789" class="h4" style="display:block">
1988
</a>
</span>
</span>
</div>
</div>
</div>
</div>
</div>更新
尝试的第二个解决方案，由Isherwood提供的第二个解决方案
几乎可以工作，在这里看起来不错
和这里
，
但此时我希望图像要缩小，因为没有足够的空间，但是它不
我尝试在img-fluid中添加添加，但这使图像完全消失了！
I'm using bootstrap 5.1 and a fluid container, for this row I have two columns, one of 3 and one of 9
It looks okay when fullscreen:
But if I just make the window a bit smaller, the text overlays the image, even though there is plenty of unused space to the right
Why does this bootstrap text overlap image when make screen smaller?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row g-0">
<div class="col-3 m-2">
<img src="https://via.placeholder.com/400" class="figure-img border border-dark" width="400"
height="400">
</div>
<div class="col-8 m-2">
<div>
<div>
<span>
<label>
Album Artists
</label>
<span>
<a href="/artist.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Album Artists / Sting&cid=0$=Album_Artists$18649" class="h4" style="display:block">
Sting
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Genre
</label>
<span>
<a href="/genre.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Genres / Pop rock&cid=0$=Genre$17160" class="h4" style="display:block">
Pop rock
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Album Type
</label>
<span>
<a href="/albumtype.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Album Types / EP&cid=0$=MusicBrainz Album Type$14830" class="h4" style="display:block">
EP
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Label
</label>
<span>
<a href="/container.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Labels / A&M Records&cid=0$=Label$18525" class="h4" style="display:block">
A&M Records
</a>
</span>
</span>
</div>
<div>
<span>
<label>
Year
</label>
<span>
<a href="/container.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Years / 1988&cid=0$=Date$789" class="h4" style="display:block">
1988
</a>
</span>
</span>
</div>
</div>
</div>
</div>
</div>Update
Tried second solution provided by isherwood
It nearly works, looks fine here
and here
but at this point i would like image to shrink because not enough space but it doesnt
I tried adding back in img-fluid but that makes the image disappear completely !
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
简而言之，您需要改进列处理。显然，您希望第一列在较小的屏幕上更大，因此请这样做。实际上，您的列仅加总高达11个（有12个单位），我们可以使用级联类为图像提供了更多较小屏幕上的空间。
不要在列上放边距。这使总宽度混乱了，它们会包裹，因为它们不再适合行。相反，在内部使用填充物或在内部元素上使用边距。
还将响应式图像类图像上。这是一个安全功能，因此图像永远不会溢出。使用您的网格来控制图像大小，而不是宽度和高度属性。那不是响应迅速的方法。
如果您 did 想要让图像指示第一列大小，则可以切换到纯 flexbox 方法，不使用固定的列尺寸。
在这里，我已经删除了响应式图像类，并添加了一些定制CSS（使用视口单元限制宽度），用通用
col替换列类，并在第二列上设置flex-fill伸展。该行上还有一个flex-nowrap类，以保持水平。Simply put, you need to improve your column handling. Apparently you want the first column to be larger on smaller screens, so make it so. Your columns actually only added up to 11 (there are 12 units available), and we can use cascading classes to give the image more space on smaller screens.
Don't put margin on columns. That messes with total width and they'll wrap because they no longer fit the row. Instead, use padding inside or margin on interior elements.
Also put the responsive image class on the image. That's a safety feature so the image never overflows. Use your grid to control image size, not width and height attributes. That's not a responsive approach.
If you did want to let the image dictate first column size, you could switch to a purely flexbox approach and not use fixed column sizes.
Here I've removed the responsive image class and added some custom CSS for sizing (using viewport units to limit width), replaced column classes with the generic
col, and setflex-fillon the second column so it stretches. There's also aflex-nowrapclass on the row to keep things horizontal.