Bootstrap响应式类d-none d-sm-block在指定段落区域失效，如何解决？

看起来你是想用Bootstrap的响应式工具类实现指定段落在小屏幕上隐藏的效果，但目前的代码可能存在结构或类使用的问题，我来帮你拆解分析：

问题核心分析 #

你的需求是让段落在小屏幕设备上隐藏，先明确Bootstrap的断点定义：

• xs：超小屏幕（<576px，手机类设备）
• sm：小屏幕（≥576px，平板类设备）

你当前给段落所在的div加了d-none d-sm-block，这个类的逻辑是：默认状态下所有屏幕隐藏，在sm及更大的屏幕上显示——这其实已经符合「手机小屏幕隐藏，平板及以上显示」的需求，但如果实际效果不符合预期，大概率是这两个问题：

1. 网格结构嵌套错误 #

Bootstrap的网格系统要求列必须嵌套在行（row）内部，你现在直接在一个col-12的div里嵌套另一个col-12，会导致不必要的内边距和布局错乱，甚至可能影响响应式类的生效。

2. 断点类的理解偏差 #

如果你口中的「小屏幕」指的是平板及以下（sm+xs），想要这类设备都隐藏段落，只在中等屏幕（md≥768px）及以上显示，那当前的类就不符合需求了。

修正后的代码方案 #

方案一：仅手机（xs）隐藏，平板及以上显示 #

修正结构并简化冗余的列类：

<div class="col-12"> 
  <h2>Corporate Leadership</h2> 
  <h3>Peter Pan <small>Chief Epicurious Officer</small></h3> 
  <div class="row"> <!-- 新增row包裹内部列，符合Bootstrap网格规范 -->
    <div class="col-12 d-none d-sm-block"> 
      <p> Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections. </p> 
    </div>
  </div> 
</div>

方案二：平板及以下（sm+xs）隐藏，中等屏幕及以上显示 #

把响应式类改成d-none d-md-block即可：

<div class="col-12"> 
  <h2>Corporate Leadership</h2> 
  <h3>Peter Pan <small>Chief Epicurious Officer</small></h3> 
  <div class="row">
    <div class="col-12 d-none d-md-block"> 
      <p> Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections. </p> 
    </div>
  </div> 
</div>

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