为什么header-btn-container不需要加d-block

为什么header-btn-container不需要加d-block

在CSS样式设置中,为什么header-nav-container需要在d-none后再加上d-md-block实现中屏以上恢复显示,而在header-btn-container没有加d-block,中屏消失后小屏时也能显示出来呢?

<div class="header-btn-container col-4 d-md-none">


 <nav class="header-nav-container col-md-9 d-none d-md-block">

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2020-12-15 10:24:27

同学你好,d-block代表的是显示,而元素默认是显示的,所以不加也可以。这两个元素设置的类名不一致,要分清。

1、header-btn-container元素默认是显示的,添加的隐藏类是

http://img1.sycdn.imooc.com//climg/5fd81d4009032a2805600060.jpg

也就是在中屏隐藏

http://img1.sycdn.imooc.com//climg/5fd81d62095b2d0a03470104.jpg

那么在不是中屏的时候恢复到显示效果。

2、header-nav-container需要在中屏显示,所以添加的类是

http://img1.sycdn.imooc.com//climg/5fd81dc509117abc04470062.jpg

http://img1.sycdn.imooc.com//climg/5fd81dd009161a0103600104.jpg

在不是中屏的时候隐藏

http://img1.sycdn.imooc.com//climg/5fd81deb0981c0b910090168.jpg


​祝学习愉快!

  • 提问者 慕妹8003063 #1

    我想问的不是这个角度,对于nav,因为grid.css里的代码顺序,最小屏在最前面,以次增大,最大屏的在最后面,因此,先执行了最小屏里的d-none,显示消失了,在中屏需要显示的时候,需要设置d-md-block来恢复显示,而后在更大屏时,也会维持显示,是这样吧?但是对于Btn,在中屏时,设置了d-md-block,那么在中屏以上会不显示,但是,在小于中屏时,并没有设置d-block,它怎么恢复显示的啊?

    2020-12-15 12:57:13
  • 提问者 慕妹8003063 #2

    上面写错了,Btn在中屏时是设置了d-md-none。

    2020-12-15 12:59:57
  • 好帮手慕星星 回复 提问者 慕妹8003063 #3

    你好,关于nav理解的没有问题。而btn在中屏以上会隐藏,那么在小于中屏的时候d-md-none样式就失效了,而元素默认就是显示的(小屏的时候并没有设置隐藏),所以不需要设置d-block。 nav为什么要设置d-md-block显示?是因为一开始设置了d-none隐藏,如果不设置隐藏也是显示的。

    简单理解就是元素在不设置隐藏的时候就是显示的,不需要特意设置block显示。

    祝学习愉快!

    2020-12-15 16:46:46
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师