如何在Bootstrap中让内容换行以适配列宽度？

你的问题源于Bootstrap版本的类名差异：Bootstrap 4已移除col-xs-*这类前缀，超小屏幕（<576px）的栅格列直接使用不带前缀的col-*类。

修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-2 col-md-4">
    Name
  </div>
  <div class="col-10 col-md-8">
    <b class="d-block">Here some name</b>
  </div>
</div>

关键说明： #

• 将col-xs-2替换为col-2，col-xs-10替换为col-10，小屏幕下两列会保持2/10的宽度比例并排显示。
• 当列内内容宽度超出列宽时，会自动换行，不会触发列堆叠。

内容的提问来源于stack exchange，提问作者Ivan Debono