css background-image 全部显示_Bootstrap的Display显示属性-CSDN博客

本文链接：https://blog.csdn.net/weixin_39639643/article/details/113053315

使用我们的响应式="https://developer.mozilla.org/en-US/docs/Web/CSS/display">display实用程序类更改显示属性的值。系统默认特意支持display所有可能值的一个子集。

display常用属性
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

在某个尺寸下显示

尺寸	class
全部可见	.d-block
仅在xs屏幕时可见	.d-block .d-sm-none
仅在sm屏幕时可见	.d-none .d-sm-block .d-md-none
仅在md屏幕时可见	.d-none .d-md-block .d-lg-none
仅在lg屏幕时可见	.d-none .d-lg-block .d-xl-none
仅在xl屏幕时可见	.d-none .d-xl-block

在某个尺寸下隐藏

尺寸	class
所有屏幕下隐藏	.d-none
只在xs屏幕上隐藏（即仅在手机屏幕上隐藏-其它规格屏幕正常显示-译者注）	.d-none .d-sm-block
只在sm屏幕上隐藏（其它屏幕规格均显示）	.d-sm-none .d-md-block
只在md屏幕时隐藏（其它屏幕规格均显示）	.d-md-none .d-lg-block
只在lg屏幕时隐藏（其它屏幕规格均显示）	.d-lg-none .d-xl-block
只在xl屏幕时隐藏（其它屏幕规格均显示）	.d-xl-none

在打印的时候显示 d-print-block

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的Display显示属性</title>
</head>

<body>
	<div class="container">
		<!-- 在打印的时候显示，d-print-block -->
		<div class="row mt-5">
			<div class="col d-none d-print-block">author:陈学辉；wechart:kaivon</div>
			 <!-- 3.x的版本打印的类名为.visiable-print-block -->
		</div>
	</div>
</body>

</html>