Bootstrap 中的 Display 属性示例
bootstrapweb developmentfront end technology更新于 2026/1/25 2:07:17
Bootstrap 中的 Display 属性 用于设置元素的显示属性。Bootstrap 实用程序提供了诸如"block"、"inline"等类，用于直接控制元素的显示属性。 Bootstrap 中的这些显示属性类允许开发人员轻松地将 CSS 显示属性值应用于元素，而无需手动编写相应的 CSS 样式。
以下是显示属性类 -
.d-block - 此类将元素的显示属性设置为块级。
.d-inline - 此类将元素的显示属性设置为内联。
.d-inline-block - 此类将元素的显示属性设置为内联块级。
语法
以下是 Bootstrap 中"d-inline"、"d-block"和"d-inline-block"类的语法 -
<div class="d-inline"> 内联 </div> // 用于内联显示 <div class="d-block"> 块 </div> // 用于块显示 <div class="d-inline-block"> 内联块 </div> // 用于内联块显示
示例
以下示例演示了"d-block"类的用法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-block bg-success"> Tutorialspoint </div>
<div class="d-block bg-success"> Tutorialspoint </div>
</body>
</html>
示例
在下面的示例中，我们在 HTML <div> 元素上使用引导"d-inline"类 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-inline bg-success"> Tutorialspoint </div>
<div class="d-inline bg-success"> Tutorialspoint </div>
</body>
</html>
示例
在下面的例子中，我们演示了"d-inline-block"类的用法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-inline-block bg-success"> Tutorialspoint </div>
<div class="d-inline-block bg-success"> Tutorialspoint </div>
</body>
</html>
