Bootstrap中.d-none .d-sm-block类失效：如何仅在xs屏幕隐藏段落？

嘿，我一眼就瞅到问题所在啦！你给段落标签的class属性里写的类名多了前缀的点（.），这就是导致Bootstrap响应式隐藏类不生效的核心原因。

为啥会出这问题？ #

在CSS代码里，我们用.d-none这种带点的写法来定位类名为d-none的元素，但在HTML的class属性里，只需要写类名本身，完全不需要加这个点。你现在写的class=".d-none .d-sm-block"，相当于给元素加了两个根本不存在的类：.d-none和.d-sm-block（带点的类名），而Bootstrap定义的正确类名是不带点的d-none和d-sm-block，浏览器找不到对应的样式规则，自然就不会生效啦。

修正后的代码 #

把所有<p>标签的class属性里的点去掉就搞定了，修改后的代码如下：

<div class="container">
 <div class="row row-content align-items-center">
 <div class="col-12 col-sm-12">
 <h2>heading 1</h2>
 <p class="d-none d-sm-block">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <h3>heading 2</h3>
 <p class="d-none d-sm-block">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <h3>heading 3</h3>
 <p class="d-none d-sm-block">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <h3>heading 4</h3>
 <p class="d-none d-sm-block">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 </div>
 </div>
 </div>

效果验证 #

修改完成后，这些段落就会完全符合你的需求：在xs屏幕（宽度小于576px）下自动隐藏，sm及以上尺寸的屏幕则正常显示内容。

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