提问人：Denil Shaji 提问时间：11/16/2023 最后编辑：isherwoodDenil Shaji 更新时间：11/17/2023 访问量：36
如何使我的列换行以更好地适应长词？
How can I make my columns wrap to better fit long words?
问：
我尝试过网格类，但没有一个有效。内容是响应式的，而 h2 元素相互重叠。我希望在从小型设备查看时将它们堆叠起来。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="col-sm-4">
<h2>Heading</h2>
<p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
<button type="button" class="btn btn-light">View Details »</button>
<div class="row">
<div class="col-sm-6">
<h2>Heading</h2>
<p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
</h2>
</div>
<div class="col-sm-6">
<h2>Heading</h2>
<p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
</div>
</div>
</div>答：
0赞
isherwood
11/17/2023
#1
您需要在小屏幕尺寸下将有问题的列设置为全宽（12 个单位）。然后，您可以在中等和更大的屏幕尺寸下将它们缩小到一半宽度（6 个单位）。
有关详细信息，请查看网格文档。
请参阅整页演示以及紧凑型演示，了解新行为。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="col-sm-4">
<h2>Heading</h2>
<p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
<button type="button" class="btn btn-light">View Details »</button>
<div class="row">
<div class="col-sm-12 col-md-6">
<h2>Heading</h2>
<p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
</div>
<div class="col-sm-12 col-md-6">
<h2>Heading</h2>
<p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
</div>
</div>
</div>
评论