先决条件
- 我有一个用于重复或关闭问题的 searched
- 我有一个避免常见问题的任何 HTML 的 validated
- 我阅读了 contributing guidelines
描述问题
我正在使用卡片将一些简单的文本放入其中。
如果我在卡片正文中添加更多的 <p></p>,卡片标题和卡片正文的文本会变大。
在 Android 上使用 Chrome 稳定版(v111.0.5563.57)测试了这个问题。
带有 1 段落的卡片没有问题，预期结果：
带有 3 段落的卡片，您可以看到在这种情况下文本略微变大：
减少的测试用例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
</head>
<body>
<div class="container mt-3">
<div class="card">
<div class="card-header">
Card Title
</div>
<div class="card-body">
<p>With supporting text below as a natural lead-in to additional content.</p>
<p>With supporting text below as a natural lead-in to additional content.</p>
<p>With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>您在哪个操作系统上看到了问题？
Android
您在哪个浏览器上看到了问题？
Chrome
您使用的是哪个版本的 Bootstrap?
5.3.0-alpha1
6条答案
按热度按时间fruv7luv1#
aemubtdh2#
无法解决这个问题。
hkmswyz63#
看起来您遇到的问题可能与卡片主体中段落的默认字体大小有关。当您向卡片主体添加更多段落时，文本的字体大小似乎略有增加，导致文本显示得比预期要大。
要解决此问题，您可以向CSS文件添加一条规则，以明确设置卡片主体内的文本字体大小。请将以下代码添加到您的CSS文件中：
这应该将卡片主体内所有段落的字体大小设置为一致的大小，无论存在多少段落。
关于这个问题是在Android上的Chrome稳定版(v111.0.5563.57)上进行测试的，我建议您检查是否存在可能导致此问题的特定浏览器相关问题。我建议您在其他浏览器和设备上测试该问题，以查看问题是否仍然存在。
liwlm1x94#
我刚刚进行了一些测试，在Android 13上的Firefox(111.0)和Edge(110.0.1587.66)上没有问题。这个问题只出现在Android上的Chrome(v111.0.5563.57)上，桌面版的Chrome(111.0.5563.64)上没有问题(Linux Mint 21)。
有一个奇怪的地方：
如果我按照你的建议设置
font-size: 1rem,问题仍然存在，但是如果我设置为1.1rem或更多，它就可以正常工作。还有一个奇怪的地方：卡片主体和卡片头部的文本大小都会稍微增加一点，而且卡片头部的文本并不在
<p></p>内。wribegjk5#
根据您提供的其它细节，问题似乎仅出现在Chrome for Android上，并且可能与段落的默认字体大小无关。要解决这个问题，可以考虑在卡片主体的CSS规则中将字体大小增加1rem以上几个像素。还可以通过添加单独的CSS规则来具体更改卡片头部中的文本字体大小。在多个设备和浏览器上测试代码可以帮助确定问题仅出现在Android上的Chrome上，尽管可能没有简单的解决方法。
ebdffaop6#
听起来你遇到的问题是由于Chrome浏览器安卓版中的一个已知bug导致的，即卡片元素内的文本随着添加更多内容而变大。
要解决这个问题的一种方法是添加一个自定义CSS规则，为卡片元素设置固定的字体大小，如下所示：
这将确保卡片元素内的文本在添加更多内容时不会变大。