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 - 以正确的方式删除边距(溢出) 的相关文章

  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

    Premise 我找到了这两个答案 但我不明白如何将它系统地应用于许多库 检测并记录外部 JavaScript 或 CSS 资源加载失败的情况 https stackoverflow com questions 5683824 detect
  • 如何在编译引导程序时修复较少的错误?

    附件是编译时使用的跟踪grunt dist webmaker Anils MacBook Pro bootstrap anil grunt dist Running clean dist clean task Running less co
  • 将 SVG 的高度设置为行高?

    我想将我的 SVG 图像作为图标包含在标题旁边 h1 img src icon sell svg class icon Verkaufen h1 字体大小为h1 is 36px和line heigt is 1 1 我使用检查器工具发现计算出
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 即使退出该功能后,.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