📌  相关文章
📜  引导程序隐藏行 - Html (1)

📅  最后修改于: 2023-12-03 15:25:35.143000             🧑  作者: Mango

引导程序隐藏行 - Html

在网页设计中，我们经常需要让一些行在不同的条件下显示或隐藏。这时，我们可以使用引导程序隐藏行。

引导程序隐藏行的基本语法
<div class="row d-none"></div>
  • 以上代码会创建一个 row 类的 div 元素，并使用 d-none 类将其隐藏。
引导程序隐藏行的类列表

.d-none

元素将不显示，也不占据页面空间。

.d-block

元素将显示，并填充整个父元素宽度。

.d-inline

元素将显示，并只占据它所需要的宽度。

.d-inline-block

该元素将显示，不会换行，且它后面的元素将在同一行上排列。

示例

以下代码演示如何使用 d-none 类隐藏一行。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引导程序隐藏行</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>引导程序隐藏行</h1>
          <p>这里是一些文本。</p>
          <div class="row d-none">
            <div class="col-md-12">
              <p>这一行将被隐藏。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

以上代码将创建一个被隐藏的行，只有 h1 和 p 元素会出现在页面上。