我为此感到疯狂，我似乎无法找出原因。我对Bootstrap不太了解，但是我认为还可以，我已经尝试了许多不同的方法。
因此，我在卡片内有一个聊天框，其中一栏应尝试占用卡片的整个宽度，在右边有一列col-2，其中包含消失在较小屏幕上的用户列表（{{1} }） 就像在Discord中一样，消息按用户块堆叠。 每个消息块均由一个col-xs-1（用于保存用户头像）和一个用于显示实际消息的全角列组成。
虽然一切似乎都很好，但是当其中一条消息较长时，消息列会以某种方式折叠在较小屏幕上的头像列下。 它还会导致响应用户列出现问题，在达到d-none断点之前，它会被推到另一个固定宽度列下。当一条消息很长时，无论如何它都会被推送到所有屏幕尺寸上。我没有任何运气就尝试断字，溢出等。这个词被打成碎片，但仍然引起问题。
您可以在bootply上查看代码：https://www.bootply.com/KmwTGY86yu 或作为摘要
d-none d-lg-block
只需在另一个窗口中将其打开，然后将其调整为较小的尺寸即可。
答案 0 :(得分：0)
我看到您使用Bootstrap 4。
代替Wunreachable-code使用[-Wunreachable-code，而不使用col-xs-1，使用col-1（或col col-11来化身和消息之间的距离）
col-10