如何在 Bootstrap 中使用显示属性？答案

【问题标题】：How to use display property in Bootstrap?如何在 Bootstrap 中使用显示属性？
【发布时间】：2018-12-29 00:56:10
【问题描述】：

我需要使用 Bootstrap 的一些属性解释here。

我在我的模板中编写了以下代码：

<div class="row row-content">
        <div class="col-12 col-sm">
            <h2>Corporate Leadership</h2>
            <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
            <p class"d-sm-none d-md-block">This has to be hidden in small sizes</p>                
        </div>
   </div>

问题是它不起作用。不知道要不要导入一些scss类，但是老师指定我们只需要使用css即可。

【问题讨论】：

尝试在JSFiddle 中编写您的代码，以便任何人都可以调试它并让它为您运行。
另外，如果您想编写自己的CSS，它可以根据屏幕尺寸工作，那么您可以使用media query 编写您的CSS 代码。

标签： css bootstrap-4 responsive display

【解决方案1】：

首先，您的段落元素类属性缺少= 符号。修复它

<p class="d-sm-none d-md-block"> ... </p>

其次，很高兴您提供了一个指向 Bootstrap 显示属性文档的链接。如果您仔细阅读，.d-{breakpoint}-{value} 表示从{breakpoint} 和向上，它将显示为{value}。所以：

d-sm-none -> 从断点 sm 和 up

开始显示为 none

d-md-block -> 从断点 md 和 up

显示为块

将这两者结合起来会给你在断点 sm 和 md 之间显示 none 的效果。

如果要为小屏隐藏段落，可以从一开始就将其显示设置为none，并改为block for breakpoint md：

<p class="d-none d-md-block"> ... </p>

小提琴： http://jsfiddle.net/aq9Laaew/104005/

顺便说一句，<div> 上的 col-sm 类是不必要的。仅当您有超过 1 列并且希望它们具有相同的宽度时，它才有用。

【讨论】：

【解决方案2】：

你是在导入 Bootstrap 吗？

如果没有，请将以下内容添加到您的 <head>。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

【讨论】：