bootstrap官网中class="container-fluid"实现的是啥效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap官网中class="container-fluid"实现的是啥效果相关的知识,希望对你有一定的参考价值。

bootstrap官网中class="container-fluid" container
一个是自适应布局,一个是固定宽度布局
实例:流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
参考技术A bootstrap官网中class="container-fluid" container
一个是自适应布局,一个是固定宽度布局
实例:流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

Bootstrap 中的 class="d-none d-lg-block"

【中文标题】Bootstrap 中的 class="d-none d-lg-block"【英文标题】:class="d-none d-lg-block" in Bootstrap 【发布时间】:2022-01-17 10:46:00 【问题描述】:

我正在尝试使用 class="d-none d-lg-block"。但这对我不起作用。

下面是我正在尝试的代码。

如果我错了,请纠正我吗?

<div class="row-content">
        <div>
          <h2>Corporate Leadership</h2>
          <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
          <p class="d-none d-lg-block" >
            Our CEO, Peter, credits his hardworking East Asian immigrant parents
            who undertook the arduous journey to the shores of America with the
            intention of giving their children the best future. His mother's
            wizardy in the kitchen whipping up the tastiest dishes with whatever
            is available inexpensively at the supermarket, was his first
            inspiration to create the fusion cuisines for which
            <em>The Frying Pan</em> became well known. He brings his zeal for
            fusion cuisines to this restaurant, pioneering cross-cultural
            culinary connections.
          </p>
    <div>
<div>

【问题讨论】:

【参考方案1】:

内容仅在 lg 上显示。请添加html标签。

<head>
<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="row-content">
<div>
    <h2>Corporate Leadership</h2>
    <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
    <p class="d-none d-lg-block">
        Our CEO, Peter, credits his hardworking East Asian immigrant parents
        who undertook the arduous journey to the shores of America with the
        intention of giving their children the best future. His mother's
        wizardy in the kitchen whipping up the tastiest dishes with whatever
        is available inexpensively at the supermarket, was his first
        inspiration to create the fusion cuisines for which
        <em>The Frying Pan</em> became well known. He brings his zeal for
        fusion cuisines to this restaurant, pioneering cross-cultural
        culinary connections.
    </p>
</div>
</div>
</body>

【讨论】:

以上是关于bootstrap官网中class="container-fluid"实现的是啥效果的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

如何查看内存卡是class几的

Python 前端框架Bootstrap

bootstrap图片带文字轮播怎么写啊,哪位大侠知道啊,谢谢了

bootstrap table 行内编辑 怎么动态指定某个单元格可编辑

Bootstrap 3 class="media-body" 导致图像不显示