Question

我需要使用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。

Answer 1

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

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

第二，很高兴您提供了指向Bootstrap显示属性文档的链接。如果您仔细阅读，.d-{breakpoint}-{value}意味着{breakpoint}和上，它将显示为{value}。所以：

d-sm-none->在断点sm和上

中均不显示

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

起显示为块

将这两个组合在一起将使您在断点sm和md之间不显示任何效果。

如果要为小屏幕隐藏该段落，可以从一开始就将其显示设置为无，然后将其更改为对断点md阻止：

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

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

顺便说一下，col-sm上的<div>类是不必要的。仅当您有多于一列并且希望它们具有相等的宽度时，此功能才有用。

Answer 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">

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

2 个答案: