首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用col-lg-8 bootstrap时,页边距自动不起作用

是因为Bootstrap的栅格系统是基于12列的,col-lg-8表示占据8列,留下4列的空白。然而,Bootstrap的栅格系统默认会给每一列添加左右的边距(padding),以保持内容的间距和一致性。

如果在使用col-lg-8时发现页边距不起作用,可能有以下几种原因:

  1. 自定义样式覆盖:可能在自定义的CSS样式中对col-lg-8的边距进行了覆盖或修改,导致页边距不起作用。可以检查自定义样式并进行相应调整。
  2. 样式冲突:可能在引入Bootstrap的同时,还引入了其他CSS库或样式文件,这些样式文件可能与Bootstrap的样式发生冲突,导致页边距不起作用。可以尝试移除其他样式文件或解决样式冲突问题。
  3. 容器嵌套:如果col-lg-8被嵌套在其他容器中,可能父容器的样式或布局设置导致页边距不起作用。可以检查父容器的样式,并确保没有对子元素的边距进行了覆盖或修改。

总结起来,要解决使用col-lg-8 bootstrap时页边距不起作用的问题,可以检查自定义样式、解决样式冲突、检查容器嵌套等因素,并进行相应的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动开发-响应式

使用者要按照框架所规定的某种规范进行开发 Bootstrap优点: 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈,不断的更新迭代 让开发更简单,提高开发的效率 2.3.2...--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题--> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js....col-sm- .col-md- .col-lg 栅格系统用于通过一系列行与列的组合来创建页面布局,内容就可以放入这些创建好的布局中 行 (row) 可以去除父容器的15px<em>边</em><em>距</em> xs-extra....col-md-offset 类可以将列向右侧偏移,这些类实际是通过<em>使用</em> * 选择器为当前元素增加了左侧的<em>边</em><em>距</em> (margin) <div class=...类就可以改变列 (column) 的顺序 左侧 <div class="col-lg

2.4K20
  • 【云端架构】前端 css print 用法

    media print{ /*隐藏不打印的元素*/ .no-print{ display:none; } /*其他打印样式*/ } 但是,就打印表单来说,仅解决上述问题是不够的,我们无法忍受表单存在打印分页内容被截断...这就要使用到css打印样式了,即@page,用来指定页面盒子的各个方面。...eg1:尺寸、设置 @page{ size: 5.5in 8.5in; margin: 30px; } 注:这里除了可以用长度值声明尺寸,还可使用纸质尺寸关键字”A4″或“legal”;亦可通过关键字指定页面方向...当margin设置不起作用时检查打印机是否是否设置了默认以外的值。...eg2:设置第一、奇数页或偶数页样式(以首页为例) @page :first { /*首页设置*/ } 注:left、right分别为偶数页、奇数页选择器。

    2.9K80

    WordPress 主题教程 #11:宽度和布局

    详细解释: margin: 0 auto 0 auto; 意思是(注意顺序):0上页空白,自动右页面空白,0下空白和自动左页面空白。从现在开始,记得设置左右空白为自动将使得居中对齐。...还记得设置左边和右边的空白为自动是居中吗?...第7步:给侧边栏增加其余的 10 像素 给侧边栏增加其余的 10 像素的空白。...第8步(额外的步骤):修正 IE 的双倍 bug Internet Explorer 有个双倍的 bug,这样在 IE 下,我们的页面就是 20像素,20像素的可能会破坏布局并把侧边栏挤到页面的底部...,因为一个20像素的使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。

    1.2K20

    深入学习下 CSS 间距相关的知识

    折叠 简而言之,当两个垂直元素有一个,并且其中一个的大于另一个,就会发生折叠。 在这种情况下,将使用较大的,而忽略另一个。...负 它可以与四个方向的一起使用,在某些用例中非常有用。 让我们假设以下内容: 父级有 padding: 1rem,这导致子级从顶部、左侧和右侧偏移。 但是,子元素应该紧贴其父元素的边缘。...在使用 :not 选择器之前无法覆盖它。 如果设计有多于一列,它将不起作用,见下图。 关于解决方案 #2,它没有 CSS 特异性问题。 但是,它仅适用于一个列堆栈。...间隔组件 是的,你没看错, 有人指出这篇文章讨论了避免使用间隔组件而不是它们的概念。...对于大型设计系统,不断为组件添加是不可扩展的。这最终将导致令人毛骨悚然的代码。 间隔组件的挑战 现在你已经了解了间隔组件的概念,让我们深入了解使用它们的一些预期挑战。

    13.4K40

    【知识】Latex中的emptmm等长度单位及使用场景

    二、在使用的时候应该如何选择?他们分别适用于那些场景?三、有哪些使用示例?1. 设置文档的2. 调整字体大小3. 定义与文字大小相关的间距4. 调整表格、图片或其他浮动体的宽度5....mm, cm:适用于页面布局设计,如设定、列宽等。当文档需要在多种不同的打印机或纸张尺寸上打印使用公制单位可以更容易地管理和预见打印效果。...in(英寸):主要用于符合美国标准的文档排版,例如设置按美国常用纸张尺寸(如信纸)的。适合在需要与设备的物理特性(如屏幕尺寸)对齐使用。...sp:主要用于非常精细的排版调整,通常在自动化排版脚本或宏中使用。对于大多数日常应用场景而言,sp单位过于细小,不常直接使用。...设置文档的        使用geometry包设置页面的,常用单位是cm或in:\usepackage{geometry} \geometry{left=2cm, top=2cm, right

    66110

    创建水平滚动的正确方式【CSS 网格布局】

    一种方法指明列表已经滚到最后:在列表末尾使用额外的空间 布局大纲 开始前,我们概览下需要实现的布局特性: 滚动的容器必须准守页面的整体布局。比如,外边和内边整体要一致。...{ grid-column: 2 / -2; } .app > .full { grid-column: 1 / -1; } .app 类元素下的子元素都会被“容器化”,它们都有 20px 的...因为我们考虑整体布局,水平滚动的两填充内边,我们删除了 .full 类,然后添加如下: .hs { display: grid; grid-gap: 10px; grid-template-columns...repeat(6, calc(50% - 40px)); grid-template-rows: minmax(150px, 1fr); } 如果我们在 grid-template-columns 两添加内边...,然而,剩下的卡片通过自动放置算法布局。

    2.6K50

    全栈第一步-CSS基础前言CSS基础总结

    使用过程中为了统一认识,使用box-sizing:border-box比较好。 上文提到了可以显式设置width、height,目前也存在一些设置width/height不起作用的元素。...默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生效果;但竖直方向的padding-top..., padding-bottom, margin-top, margin-bottom不会产生效果。...总结 本文对近期的CSS学习做个总结,总结过程中发现自己对于position定位还不是特别清楚,后续使用过程中得继续体会,接下来准备学习下bootstrap和jquery。

    52120

    CSS 中你需要知道 auto 的一切!

    Flexbox 在某些情况下,在flexbox中使用自动非常有用。当一个子项目有一个margin是auto ,它将被推到远的另一。...使用CSS网格,可以使用自动实现类似于 flexbox 的结果。...更好的是,使用flexbox或grid属性,以防使用它们完成工作。 如果没有,那么请使用自动作为最后的选择,而应使用CSS逻辑属性。...Flexbox 和 自动 当谈到flexbox,它有无限的可能性。 通过将其与自动相结合,我们可以构建功能强大的布局。 考虑下面的例子 ? 我们在右侧包含一行标题,描述和一个操作按钮的行。...CSS将如下所示: .item__action { margin-inline-start: auto; } CSS grid 和自动 在向网格项目添加,它可以是固定值,百分比或自动

    5.3K30

    (2019)面试题:CSS盒模型你了解多少?

    问题 1、请谈谈你对盒模型的认识 2、Bootstrap默认全局使用什么盒模型 2、你知道盒模型模型有哪些(2种)?...width/height 只是内容高度,不包含 padding 和 border 值 IE:box-sizing: border-box; (Bootstrap 框架全局配置成此类型) ?...重叠问题 先说解决方案:BFC,在我第一篇帖子里已经提到了此解决方案:https://www.misiyu.cn/article/96.html#B....%E5%A4%96%E8%BE%B9%E8%B7%9D%E6%8A%98%E5%8F%A0 我这里就说一下 重叠问题是什么问题: 也就是说,两个盒子如果一个盒子设置下边,一个盒子设置了上边,那么他们的间距是多少...答案是按最大的算 但是如果想他们的不重叠,而是相加,怎么办呢?利用BFC来解决。至于什么是BFC,BFC生成条件有哪些,请看上面链接的我的另一篇文章。

    84400

    译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例

    margin 折叠 简而言之,当两个垂直元素具有margin,并且其中一个元素的margin大于另一个元素,发生折叠。在这种情况下,将使用更大的margin,而另一个将被忽略。 ?...在上面的模型中,一个元素有 margin-bottom,另一个元素有 margin-top,较大的元素获胜。 为避免此类问题,建议按照本文使用单向。...此外,CSS Tricks还在底部和顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...你猜到了,那是因为折叠。 Just In Case Margin 我喜欢把这个叫做 “Just in case” margin,因为这就是字面意思。考虑一下下面的模型图。 ?...结果表明,基于 writing-mode 的工作得非常好。 我认为这些用例就足够了。让我们继续一些有趣的概念! 组件封装 大型设计系统包含许多组件。向其直接添加是否合乎逻辑?

    12K10

    mac网页设计工具Bootstrap Studio Macv6.1.3

    Bootstrap Studio for Mac是一款功能强大的mac网页设计工具,可以帮助您通过拖放操作轻松创建漂亮的网页。...bootstrap studio下载配备了大量内置组件,您可以通过拖放来组装响应式网页。...它建立在非常受欢迎的Bootstrap框架之上,并输出干净和语义化的HTML,全面支持键盘快捷键,可让您大幅加速工作流程。详情:https://mac.macsc.com/mac/816.html?...它会自动用于新设计。对于现有项目,您可以从“设置”>“电子商务”切换到它。您现在可以通过在设计中包含语言 JSON 文件将回流组件翻译成任何语言。需要回流工具包 v2。...调整画布大小时,/填充调整大小模式保持活动状态,从而更容易定义响应间距。固定的修复了在编辑大型设计时导致速度变慢的性能问题。小错误修正和增强。

    57750

    LCD RGB 控制技术 时钟篇(下)【转】

    铺垫 在我们日常生活中,例如我们要打印材料,一般我们都是用的A4的纸张,但是你有没有发现一般我们打印的内容离A4纸张有一定的?这就是我们再word里面可以设置的。 ?...我们都知道节约用纸,的存在虽然浪费了一点纸张,但从美观或者打印的角度上页都带来一定的好处。在讲解LCD时钟的细节部分,就有点像设置的赶脚......如果内容太靠边了,一点点误差可能就会导致一些内容不能正常显示(让我想起高中的盗版书,总有那么几页是歪的,或者内容没有打印完) 所以LCD控制器为了能更好的显示有效数据,一般都要进行一系列的调整,就像上面设置的“...”,但是这种“”不是距离而是通过上述的时钟调整的。...注:现在的LCD比较先进了,一般都可以自动调整,但是这几个值还是保留了下来 4. VBP、VFP、HBP、HFP具体数值 既然这是调整,那我们如何确认上述的几个值呢?

    1.8K21

    【Wordpress】Crayon Syntax Highlighter 与主题不兼容

    推荐理由: 集成主题编辑器 切换行号 复制 / 粘贴代码 在新窗口中打开代码 自动获取博客文章 / 评论中的… 进行高亮 远程请求缓存 可以在一个代码框内混合语言高亮显示 可以在行内调用代码高亮...文件扩展名检测 设置实时预览 支持修改尺寸,,对齐方式,字体大小,行高等等 安装插件: 打开后台,左侧菜单栏,找到插件,点击安装插件, 搜索 Crayon Syntax Highlighter,安装即可...遇到问题: 问题1、显示出来的代码块无法点击,右上角的复制/粘贴、展开等功能button点击不起作用: ? 网上找了很多资料,都没有找到原因。...这个说明某些主题的代码中有可能就做了上面的这种不自动加载 jQuery 改动。 这样就导致了某些依赖js文件的插件不起作用。看到这里,我们就不防去验证一下。...问题2、HTML实体字符转义问题: 在Wordpress中使用 Crayon Syntax Highlighter ,代码段内的HTML实体不会被解释,导致'’显示为’>

    6.1K10
    领券