css – Bootstrap 4:Hidden Visible Cols?

栏目: CSS · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/45812618/bootstrap-4-hidden-visible-cols
我想知道为什么以下不起作用 – 其中xs隐藏在xs视图中.我觉得这与Bootstrap v4中引入的更改有关,但我想知道这里的代码是如何在这里仍然可以实现的,而不是进入CSS?我使用的是默认的bootstrap.css文件.
<div class="container">
    <div class="row">
    <div class="hidden-xs col-lg-4 col-md-6 col-sm-12 col-xs-12">
    Some text here.
    </div>
</div>

添加此答案是因为接受的答案中的评论过长而且不完整.如前所述,Bootstrap 4 beta中不再存在hidden- *类.

“究竟什么是隐藏的-sm-DOWN?”

它不再存在于beta中,但它之前的版本意味着“隐藏在小而小”.含义,隐藏在xs和sm上,但在其他方面可见.

如果要在Bootstrap 4中的特定层(断点)上隐藏元素,请相应地使用d- * display类.请记住,xs是默认(始终隐含)断点,除非被更大的断点覆盖.由于暗示了xs,因此不再使用-xs-中缀.例如,它不是d-xs-none,它只是d-none.

https://www.codeply.com/go/bRlHp8MxtJ

> hidden-xs-down = d-none d-sm-block

> hidden-sm-down = d-none d-md-block

> hidden-md-down = d-none d-lg-block

> hidden-lg-down = d-none d-xl-block

> hidden-xl-down = d-none(与隐藏相同)

> hidden-xs-up = d-none(与隐藏相同)

> hidden-sm-up = d-sm-none

> hidden-md-up = d-md-none

> hidden-lg-up = d-lg-none

> hidden-xl-up = d-xl-none

> hidden-xs(only)= d-none d-sm-block(与hidden-xs-down相同)

> hidden-sm(only)= d-block d-sm-none d-md-block

> hidden-md(only)= d-block d-md-none d-lg-block

> hidden-lg(only)= d-block d-lg-none d-xl-block

> hidden-xl(仅)= d-block d-xl-none

> visible-xs(only)= d-block d-sm-none

> visible-sm(only)= d-none d-sm-block d-md-none

> visible-md(only)= d-none d-md-block d-lg-none

> visible-lg(only)= d-none d-lg-block d-xl-none

> visible-xl(仅)= d-none d-xl-block

Demo of all hidden / visible classes in Bootstrap 4 beta

另请注意,d – * – block可以替换为d – * – inline,d – * – flex等.取决于元素的显示类型.更多关于 display classes in beta

翻译自:https://stackoverflow.com/questions/45812618/bootstrap-4-hidden-visible-cols


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

零基础学Java Web开发

零基础学Java Web开发

刘聪 编 / 机械工业出版社 / 2008-1 / 59.00元

《零基础学Java Web开发:JSP+Servlet+Sfruts+Spring+Hibernte》全面讲解Java Web应用开发的编程技术,并详细介绍Java Web开发中各种常用的技术,可作为Java Web开发技术的学习指南。 《零基础学Java Web开发:JSP+Servlet+Sfruts+Spring+Hibernte》共17章,分为3篇,其中第1~12章是基础篇,讲解了......一起来看看 《零基础学Java Web开发》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具