如果我在 Bootstrap 3 中使用 .container-fluid,这是否意味着我需要使用网格类?

2023-12-27

我读过一些关于什么的答案.container and .container-fluid是,但我缺少的很简单。如果我使用 .container-fluid,我是否使用 col-xs-6、col-md-9 等列类? resize 和 .container 都执行特定大小,这就是我使用 col-x-x 类的原因,但是 .container-fluid 始终调整所有内容的大小,因此 .container-fluid 会自动处理列大小调整,我“信任”做对了吗?


The container-fluid习惯于包含网格 http://getbootstrap.com/css/#overview-container (row + col-*)但也可用于其他内容,例如标题、表格等。

So no, container-fluid不是色谱柱的替代品,而是色谱柱的支架。之间唯一的区别container-fluid and container那是container is not在较大的屏幕上为全角。这container是一个固定宽度,以两侧较大的边距为中心。container-fluid不调整大小,始终为 100% 宽度。容器演示 http://www.codeply.com/go/8YUeh6gIk0

如果你想使用响应式网格(行和列),你需要像这样使用容器或容器流体。

<div class="container-fluid">
    <div class="row">
        (one or more col-*-* here)
    </div>
</div>

Or

<div class="container">
    <div class="row">
        (one or more col-*-* here)
    </div>
</div>

Read 本文 https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc以获得完整的解释。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果我在 Bootstrap 3 中使用 .container-fluid,这是否意味着我需要使用网格类? 的相关文章

  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 当鼠标悬停在伪元素上时触发CSS动画?

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http
  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • Bootstrap 选择的自定义样式

    我发现选择 Twitter Bootstrap 的下拉菜单非常丑陋 如何仅针对选择小部件停 用 Bootstrap 或者是否可以自定义选择下拉列表的外观 一探究竟 https developer snapappointments com b
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 为什么此 TTF 字体在我的浏览器中无法使用?

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件?

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

随机推荐

  • std::vector::iterator 可以简单地是 T* 吗?

    简单的理论问题 简单的指针是否是有效的迭代器类型std vector 对于其他容器 例如列表 地图 这是不可能的 但是对于std vector所保存的数据保证是连续的 所以我认为没有理由不这样做 据我所知 一些实现 例如 Visual St
  • html 重置后,javascript 事件丢失

    我遇到过这样一种情况 div 的 html 内容有时会更改为其他内容 然后又更改回来 一些 jquery ui 控件行为不当 我已将问题简化为以下代码片段 它基本上表明与按钮关联的事件处理程序不再触发 我假设这些在它们消失后的某个时刻被垃圾
  • phoneGap (Cordova) 内部如何工作,特定于 iOS

    我已经开始为多个平台开发 html 应用程序 我最近听说了 Cordova 2 0 PhoneGap 从那时起我就很好奇这座桥是如何工作的 经过大量代码检查后 我发现 Exec js 是 JS gt Native 调用发生的代码 execX
  • 使用 Odata 查询基于 EF 的 DTO

    我有一个 ASP NET Core Web API 设置 其中包含 SQL Server 数据库和 EF 数据模型 版本 EF Microsoft EntityFrameworkCore 5 0 0 预览版 7 20365 15 OData
  • jQuery $.get 在 Chrome 中不起作用

    解决方案不起作用 在浪费了一整天学习前端 Web 开发之后 我将进度条放入 iframe 中 该 iframe 在 jquery 对话框内启动 期望 ajax get 请求从该页面开始工作 不幸的是我收到了完全相同的行为 发现问题 当您按
  • sonarqube“新代码”定义

    关于默认的质量门 奇怪的是 我们不清楚 新代码 的定义 为了说明这一点 假设我们通过添加新代码来更改文件 默认声纳质量门分析是仅对新代码行还是整个文件进行 我们不清楚 但怀疑这是整个文件 同事告诉我 项目未通过质量关卡 因为带有预先存在的阻
  • 形状渐变

    我正在尝试在按钮上执行渐变 但无法使其具有与按钮其他部分相同的渐变 我尝试在渐变中添加渐变 但它似乎不起作用并且找不到解决方案 这是我正在使用的代码 button color white padding 3px 3px 3px 0px bo
  • 如何将 CSV / MySQL 数据初始批量导入 Neo4j 数据库

    我正在考虑用 neo4j 数据库替换 MySQL 数据库 我是 neo4j 的初学者 想知道如何将我当前的 MySQL 数据批量插入到 neo4j 数据库中 以便我可以进行实验并开始了解 neo4j 关系数据库由4个表组成 Person O
  • 检索函数的返回类型而不调用该函数

    假设我在 TypeScript 中有一个这样的函数 export const foo function return a 1 b true c bar 如果我将此函数导入到另一个文件中 import foo from foobar 我的问题
  • 克隆 HashSet 的有效方法?

    前几天我回答过一个有趣的问题 https stackoverflow com questions 3897568 substract hashsets and return a copy就这样关于HashSet
  • 如何使用最小起订量模拟 ConfigurationManager.AppSettings

    我陷入了我不知道如何模拟的代码点 ConfigurationManager AppSettings User 我必须模拟 ConfigurationManager 但我不知道 我正在使用Moq http code google com p
  • Android:如何将解码器集成到多媒体框架

    最近我成功地将视频解码器移植到Android 还将输出转储到 SurfaceView 上并使用本机 API 检查输出 现在下一个任务是实现播放 暂停 流媒体等 即媒体播放器的其他功能 这样做将需要返工 因为所有这些功能都已在 Android
  • Lisp中函数参数是如何存储的?

    我假设传递给 Lisp 函数的值被分配给与参数名称匹配的引号 然而 令我惊讶的是 defun test x print eval x test 5 不起作用 变量 x 未绑定 因此 如果参数在函数中不存储为符号 那么本例中的 x 到底是什么
  • 使用数组调用 vararg 函数?

    在下面的示例中 我想将数组的内容传递给接收可变数量参数的函数 换句话说 我想传递给printf的内容foo按值传递这些参数 从而将这些参数传递到堆栈上 include
  • 如何使用 scikit-learn 从线性判别分析中获取特征向量

    如何从 scikit learn 线性判别分析对象中获取变化基矩阵 对于数组X有形状m x p m样品和p特征 和N类 缩放矩阵有p行和N 1列 该矩阵可用于将数据从原始空间变换到线性子空间 艾莉亚回答后编辑 让我们考虑以下示例 from
  • 如何检查是否跨浏览器兼容? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我的小问题是是否有一个在线工具可以检查您的 html css 和 jQuery 页面是否跨浏览器兼容 我有一个带有 jquery 的简单淡
  • SH 脚本根据文件名将文件从一个目录移动到另一个目录

    我正在尝试编写一个 sh 脚本 该脚本将在我的其中一个下载完成时运行 它应该在 Downloads 上查找特定的文件名 并根据文件名将其移动到不同的目录 IE 我已经下载了 欢乐合唱团 的最后一集 文件名是 glee some trash
  • 如何仅列出将提交的文件?

    有什么方法可以获取当我键入以下内容时将提交的文件列表 git commit m my changes git status 列出太多 我可以去掉所有的词 但我不愿意 我不想被告知有关未跟踪文件的信息 我试过了 git ls files md
  • 如何在 ASP.NET MVC 中实现分页?

    目前 我正在使用许多博客文章中找到的策略 基本上 URL 包含页码 例如 Users List 5 将为您提供分页用户列表第 5 页上的用户 但是 我没有遇到一个页面必须列出两个单独的分页列表的情况 我该如何使用 ASP NET MVC 来
  • 如果我在 Bootstrap 3 中使用 .container-fluid,这是否意味着我需要使用网格类?

    我读过一些关于什么的答案 container and container fluid是 但我缺少的很简单 如果我使用 container fluid 我是否使用 col xs 6 col md 9 等列类 resize 和 containe