Question

我一直在尝试使用引导d-none d-sm-block隐藏元素但这不起作用

我检查了bootstrap.min.js是否正确，它是

    <!DOCTYPE html>
     <html lang="en">
     <head>
     <link rel="stylesheet" href="bootstrap.min.css" >
    <link rel="stylesheet" href="styles.css" >
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="d-none d-sm-block">

    <p>Our CFO, Danny, as he is affectionately referred to by his                                 colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays,         pays!</em></p>
            </div>
            </div>
            </div>

Answer 1

问题是您给它display: none;，然后在您的类display: block;中给它d-none d-sm-block，删除后者即可使用：

 <div class="container">
  <div class="row">
    <div class="d-none">

      <p>Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties
        of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays,         pays!</em></p>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/QPqbRE

注意：您也可以只交换类，所以display：在显示之前应用了block：除了冗余代码之外，什么都没有。

您始终可以只使用开发人员工具并检查元素以查看发生了什么以及是否应用了类。

Answer 2

问题已经解决，是我忘记更新为最新版本的bootstrap.min.js和bootstrap.min.css。

隐藏引导程序中的元素不起作用

2 个答案: