前提条件
- 我有一个 searched 用于处理重复或已关闭的问题
- 我有一个 validated 的任何HTML以避免常见问题
- 我阅读了 contributing guidelines
描述问题
具有宽内容的 <pre> 标签超出了嵌套在 row 中的 flex-nowrap 类的 col 列，并导致水平滚动条。我试图将 Prism JS 和 <pre> 代码块放入 col 列中。我找到了一个解决方法：在 col 元素内添加 style="flex: 1; min-width: 0;"。
See more
简化的测试用例
<div class="container py-5">
<div class="row flex-nowrap">
<div class="col-auto">test</div>
<div class="col"><pre>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongtext</pre>
</div>
</div>
</div>您在哪个操作系统上看到问题？
Windows
您在哪个浏览器上看到问题？
Chrome
您使用的Bootstrap版本是什么？
v5.3.0-alpha1
3条答案
按热度按时间pgx2nnw81#
嗯，不仅仅是
<pre>,而是Prism JS代码块嵌套在<pre>中。我认为你理解我的意思。P.S.如果我移除
flex-nowrap类代码块，它们可以正常适应容器。rxztt3cl2#
你好，@realthemes,
在标签上使用"flex-nowrap"类会导致在一个嵌套在行内的列中出现水平滚动条。通过在col元素中包含"style=flex: 1; min-width: 0;",你已经找到了一个解决方案。你注意到这个问题不仅局限于标签，还影响到嵌套的Prism JS代码块。如果没有"flex-nowrap"类，代码块通常可以适应容器。值得注意的是，你正在使用Bootstrap v5.3.0 alpha1版本，并且这个问题发生在谷歌Chrome浏览器上。
另一个解决方案是在flex容器内添加一个带有"flex-nowrap"类的标签，以便为容器添加"overflow-x: auto;"特性。由于有限地使用水平滚动，代码块将适当地适应容器，无需任何额外的CSS样式。然而，如果你希望在容器中的其他组件上保留"flex-nowrap"类，这种方法可能不太实用。
wkftcu5l3#
感谢@mootezaloui的留言，here是关于问题及其解决方案的详细描述。看起来问题不在 Bootstrap 中，而是在弹性容器的工作上。