bootstrap container-fluid - 以正确的方式删除边距(溢出)

2024-01-10

如何从引导程序中删除所有边距container-fluid类及其行?

.container-fluid { padding: 0;}

这基本上满足了我的要求,但它为正文增加了 20px 溢出。那么我应该这样做:

body, html { overflow-x: hidden; }

做某事与.container-fluid > .row


具体说明您的问题:

The .row具有负的左右边距,等于左/右填充值col-*-*,这就是为什么当您在不了解网格如何工作的情况下摆弄网格时会出现水平滚动条的原因。如果您使用左侧和右侧的零填充或其他值来操作列类,则 .row 上的负边距必须等于列类左侧和右侧的填充。 .container 还具有与列类的值匹配的填充,以防止出现滚动条。

所以答案是:.container-fluid > .row-- 如果删除列类左侧和右侧的填充,则使左侧和右侧的边距为:0。如果全部为零,那么您只需调整 .container 或 .container 流体,左侧和右侧填充为零,但如果您使用不同的值 > 15px L & R,那么情况就不同了.container/.container-fluid如果列的左右内边距大于 15px,则需要调整。

上没有边距col-*-*当你像 Boostrap 3 那样全局使用 box-sizing:border-box 时,它的填充是完全不同的。

如果您想要紧密的网格,请删除网格上的所有填充物left and right所有列类,然后remove the negative margin on the left and right of the .row,然后你可以删除左边和右边padding on the .container.

DEMO: http://jsbin.com/jeqase/2/ http://jsbin.com/jeqase/2/

删除所有填充和负边距,以实现紧密网格和 .container 的全宽以及该类的任何周围元素(body、html 等).alt-grid:

.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}

/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}

你也可以这样做.container-fluid- 唯一要归零的是左右填充。

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

bootstrap container-fluid - 以正确的方式删除边距(溢出) 的相关文章

  • 如何在 Shiny 中动态渲染的 textInput 添加样式元素

    你好堆栈溢出 在我最近提出的问题中 我已经解决了一些与动态渲染 UI 元素相关的主要问题 并在一些了不起的人的帮助下动态创建了观察者 参见此处 动态渲染的 UI 如何在第二次运行时删除旧的反应变量 https stackoverflow c
  • 如何在 CSS 中将 RadioButton 图标样式设置为无(在 Flex 3 中)?

    您可以通过在 CSS 中设置以下值来在 Flex 中设置 RadioButton 的外观 upSkin Embed overSkin Embed ownSkin Embed disabledSkin Embed selectedUpSkin
  • 获取异常 jQuery 必须包含在 Bootstrap 的 JavaScript 之前

    我遇到以下异常 bootstrap js 240 Uncaught TypeError Bootstrap 的 JavaScript 需要 jQuery jQuery 必须包含在 Bootstrap 的 JavaScript 之前 在 Ob
  • CSS 属性选择器类以以下开头但不等于

    我想将 css 应用于以 abcd 开头的所有类 但我不想将该 css 应用于名称为 abcd dontapply 的类 我可以这样做吗 我尝试过的 a class abcd not class abcd dontapply define
  • Bootstrap 响应式表格在 iOS 设备上无法垂直滚动

    这就是我所拥有的 div class table responsive table class table style background transparent table div 我正在使用以下 bootstrap css 文件 ht
  • Angular SlickGrid 对齐标题文本

    我正在使用角度SlickGrid并希望将列标题中的文本居中或右对齐 并非所有列都以相同的方式 我发现 有一个headerCssClass列定义中的属性 但我一直尝试 这种样式似乎从未被应用 对于列定义 id sourceNumber nam
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • bootstrap3 缩略图网格

    I find a tutorial about bootstrap grid but it was written in bootstrap1 x Now I want to use bootstrap3 to achieve the sa
  • 我应该创建一个块还是一个元素 BEM CSS?

    Bem官网说 创建一个块如果一段代码可以被重用并且它不依赖于正在实现的其他页面组件 创建一个元素如果一段代码在没有父实体 块 的情况下无法单独使用 我有一个 关于部分 块 它的元素依赖于父级并且不能在网站中重复使用 如何根据 bem 这段代
  • 选择子元素但不选择孙元素

    我有以下简化的代码 div p text p div div p text p div div p text p div div p text p div 每当我设置一些值时 content pCSS 文件中的元素 更改也适用于 col1
  • jQuery 更改 id!

    我是一个 jQuery 菜鸟 一直在尝试添加一个脚本来更改 div onClick 的 id 这里有一个jsfiddle 示例 http jsfiddle net 475ep function accept div scrollwrap a
  • 使用css动画使div元素移动到页面的每个角落

    我想知道如何使用CSS动画使圆形div元素移动到页面的每个角落 我曾尝试这样做 但没有成功 这是一个相当基本的问题 但它会帮助我理解
  • Wkhtmltopdf 每页右侧的垂直文本

    下面是使用 wkhtmltopdf 生成的 PDF 示例 我需要在每一页的右书脊上生成文本 我尝试将其添加到标题代码中 似乎会剪辑 PDF 的正文 我正在使用 wkhtmltopdf 的页眉和页脚参数 不太确定如何或是否可以在每个页面的右侧
  • CSS3 - 性能最佳实践是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 单独的数据间隔 bootstrap 轮播 4

    我想为 Bootstrap 4 轮播上的每张幻灯片设置单独的数据间隔 我尝试了一些其他的 javascript 片段 但是它们似乎不适用于我的代码 例如Bootstrap 4 轮播堆栈溢出 https stackoverflow com q
  • 在 Safari 中提交表单后无法对 DOM 进行样式更改

    在 Safari 中提交表单后 我在对 DOM 进行样式更改时遇到问题 有谁知道它是否可能 这是 Safari 预期的浏览器行为吗 我设置了一个非常简单的示例 以便您可以看到实际问题 http jamesmichaelking com st
  • CSS 圆角六边形按钮

    我可以使用 CSS 创建相同的按钮 圆角是重要部位 角是主要原因 带圆角的三角形按钮 请看我下面的代码和图片 lngbtn position relative width 150px height 50px margin 50px colo
  • 使用Java获取CSS文件中图像的URL?

    我正在尝试使用 Java 获取远程 CSS 文件中图像 所有 MIME 类型 的 URL 我正在使用 jsoup 来获取 css 的 URL 经过无数个小时的观看CSS解析器 http cssparser sourceforge net 由
  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • 从“class”名称中删除/替换不需要的前缀信息

    我正进入 状态style从后端 它带有不需要的前缀 我会替换没有前缀的相同内容 正确的方法是什么 这就是我得到的

随机推荐

  • 即使退出该功能后,.NET 内存也不会释放

    我有一些 C 代码可以读取huge文件 经过一些操作后 将其引用设置为 null 并退出该函数 但内存不会释放 XmlDocument xmlDoc new XmlDocument xmlDoc LoadXml xmlString XmlS
  • 从数据库中查找视觉相似照片的算法?

    TinEye Google 和其他公司提供 反向图像搜索 您可以上传照片 几秒钟内它就会找到类似的照片 这些算法有开源版本吗 我知道 SIFT 和其他用于查找 视觉上相似 照片的算法 但它们仅适用于将一张照片直接与另一张照片进行比较 即 找
  • 创建一个用于从 Java/Clojure 执行的 jar 文件

    我想创建一个用 java 和 clojure 实现的 jar 文件来执行 这就是我采取的步骤 让我的java代码调用clojure代码 我可以生成一个包含 clojure 核心和我的 clojure 代码的 jar 文件 ThingOne
  • 活动指示器未出现

    我有一些运行时间约为 0 2 秒的繁重代码 我这样设置活动指示器 但是 它并没有显示出来 而是整个屏幕冻结了大约 0 2 秒 直到代码完成 func heavyWork self actvityIndicator startAnimatin
  • Ajax.ActionLink 在表中的标题后插入?

    我有一个 table 有一个标题行 我试图在标题行下添加一个项目 但似乎无法向ActionLink功能 InsertionMode InsertBefore将标题行的 ID 指定为更新目标只是将该行放在表的顶部 Replace替换表格的标题
  • 多次调用 CryptHashData

    我推测这是在创建一个 md5 哈希值 但对到底要哈希的内容感到困惑 char val1 4 DWORD val2 CryptCreateHash hCryptProv CALG MD5 0 0 hHash Creates hash obje
  • 在 MathJax 中显示长除法符号 )‾‾‾‾‾‾ 的方法

    有没有办法在 MathJax 中格式化长除法 使其看起来像这样 125 Explanations 4 500 4 4 1 4 10 5 4 1 8 4 2 8 20 10 8 2 20 4 5 20 0 20 20 0 但显然格式正确 这是
  • Django:SECRET_KEY 的环境变量不起作用

    I have SECRET KEY os environ SECRET KEY in my prod py and SECRET KEY secret string在我的 bashrc 中 这会导致 502 错误 但如果我设置SECRET
  • C++11 方法创建一个可以在需要时“停止”的计时器

    我必须每隔 X 秒调用一个函数来显示长时间运行的函数的进度 但如果该函数在进度更新的下一个刻度之前结束 我想删除通知 我最近刚刚开始使用 C 11 我不知道是否有办法使用正确的 c 11 语法 对象来实现此目的 基本上 我试图弄清楚是否有一
  • gridview 突出显示当前行

    是否有内置方法可以突出显示网格视图中当前选定的行 我的 gridview 中的每一行都有一个按钮 通过 ButtonField 当用户按下此按钮时 背景颜色会发生变化 我这样做 Protected Sub gvTransferOwner R
  • 网络音频播放器 - iOS 下一首歌曲和上一首歌曲按钮不在控制中心

    这是我多年来断断续续研究的问题 但从未找到答案 我发现 MediaSession api 可用于填充歌曲数据 但下一曲目和上一曲目操作处理程序不会使下一个 上一个按钮出现在 iOS 控制中心中 if mediaSession in navi
  • 如何使用 ASP.NET Core MVC 和 Angular 使用 Identity Server 4 连接到 Web API

    我在收到回复后写信在这里发帖 https github com IdentityServer IdentityServer4 issues 1179 issuecomment 304032678 我正在开发一个应用程序 该应用程序具有一个
  • Gradle - 从模块继承存储库

    首先 我解释一下我的项目设置 我使用 Android Studio 中使用的 项目 模块 一词 我的项目设置如下 LibraryProject gt 一个仅对我的库进行分组的项目 如有必要 我可以在其他项目中使用它 备份库 模块 数据库库
  • Flutter Android Studio version3.6 的“无法确定捆绑的 Java 版本”

    首先我得到错误是 android 许可证状态未知 所以我再次重新安装 他们抛出了两个错误 如下图所示 那么我该如何修复它呢 Flutter Channel stable v1 12 13 hotfix 8 on Microsoft Wind
  • 查询LDAP

    我以前没有使用过 LDAP 所以我有点迷失 我需要连接到 LDAP 源查找特定属性并更改它 该程序的输入是一个包含用户列表的 CSV 文件 该程序应该从 CSV 文件中读取 UID 找到 LDAP 中的记录并替换某个属性 我不知道如何做到这
  • Clang AST 解释

    我正在尝试解释 Clang AST 的部分内容 如下图所示 简而言之 我想做的是检查两个变量在不同的程序点是否相同 检查 AST 后 我注意到 AST 部分之间唯一的共同点是蓝色圆圈部分 谁能帮我看看这些十六进制数字在 AST 中对应什么
  • 迭代 git diff --name-only 结果时如何处理文件名中的空格

    我正在编写的脚本需要从 git diff 中遍历每个文件 但是 我不知道如何处理文件名中的空格 任何有空格的文件都会被分成 2 个文件 我知道他们需要被包裹起来 但我不知道在它进入之前如何实现这一点 param 当文件名中有空格时 我应该如
  • Python 3 有 LDAP 模块吗?

    我正在将一些 Java 代码移植到 Python 我们想使用 Python 3 但我在 Windows 中找不到适用于 Python 3 的 LDAP 模块 这迫使我们使用 2 6 版本 这很麻烦 因为其余代码已经是 3 0 格式 您可以使
  • Android - 如何创建意图来打开显示“帐户和同步设置”屏幕的活动

    我在导航到 帐户和同步设置 屏幕时看到了以下日志消息 但我对如何创建一个意图来导航到那里感到困惑 INFO ActivityManager 53 Starting activity Intent cmp com android provid
  • bootstrap container-fluid - 以正确的方式删除边距(溢出)

    如何从引导程序中删除所有边距container fluid类及其行 container fluid padding 0 这基本上满足了我的要求 但它为正文增加了 20px 溢出 那么我应该这样做 body html overflow x h