内容简介：翻译自：https://stackoverflow.com/questions/45812618/bootstrap-4-hidden-visible-cols
<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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
C++ API设计
[美] Martin Reddy / 刘晓娜、臧秀涛、林健 / 人民邮电出版社 / 2013-8 / 89.00
现代软件开发中的一大难题就是如何编写优质的API。API负责为某个组件提供逻辑接口并隐藏该模块的内部细节。多数程序员依靠的是经验和冒险，从而很难达到健壮、高效、稳定、可扩展性强的要求。Martin Reddy博士在自己多年经验基础之上，对于不同API风格与模式，总结出了API设计的种种最佳策略，着重针对大规模长期开发项目，辅以翔实的代码范例，从而有助于设计决策的成功实施，以及软件项目的健壮性及稳定......一起来看看 《C++ API设计》 这本书的介绍吧!
