Metronic框架 .row { margin-left: -15px；margin-right: -15px； } 这样式属性有什么作用

最新推荐文章于 2022-12-01 17:29:04 发布
最新推荐文章于 2022-12-01 17:29:04 发布
阅读量727 收藏
点赞数
分类专栏： C# C/S
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ganlian666/article/details/114392968
版权

在网上找到的解释：

“因为其子元素有padding-left:15px和padding-right:15px；又来将容器拉出其外部容器，使用浮动元素不掉行。”

 

 

我个人的理解是 “用来抵消第一个列的左内距和最后一列的右内距"

熙蚨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html栅格系统显示边框,Bootstrap整体框架之CSS12栅格系统
weixin_29870587的博客
06-20 1234
1.整体架构BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台)表现形式CSS组件JS插件基础支撑平台CSS12栅格系统基础布局组件jQuery响应式设计1.1 CSS12栅格系统12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。1.1.1 实现原理栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体查询，制...
详解Bootstrap网格系统
weixin_30823833的博客
04-25 139
bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理： 1、数据行（.row）必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding） <div class="container"> <div class="row...
2021-05-17
weixin_55071724的博客
05-17 1407
来框架的知识，我们最常用框架，框架就是一门框架工具，使用框架更加方便， Bootstrap是世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。 Bootstrap每次都会以预编译版、源代码两种形式发布。下面我们介绍两种形式的内容和结构。注意无论使用哪种形式，Bootstrap的JavaScript插件都需要jQuery。 这是 Bootstrap 最基础的形式：.
html 中特殊字符或形状,html特殊字符 编码css3 content:"我是特殊符号"(示例代码)
weixin_28995139的博客
06-03 289
项目中用到的一些特殊字符和图标html代码css代码.cross{width: 20px;height: 20px;background-color: #F3F9FF;border-radius: 10px;border: 1px solid #DBE6EF;display: inline-block;position: relative;bottom: 20px;right: 15px;}.cr...
css3 箭头 上下左右
acongshijia的专栏
12-22 3410
.u-icon-arr { position: absolute; top: 50%; right: 15px; width: 12px; height: 12px; border-style: solid; bor
解决Bootstrap container样式左右内边距15px，导致屏幕不美观
SmallLu161226的博客
01-13 3万+
首先上问题：此问题为bootstrap的 container样式导致，该样式默认左右内边距15px为了栅栏效果而设计，具体看源码css样式，如下图，右侧黄色边框边距和30px，实为两个div左浮动，将边距挤到右侧； 解决它很简单：只需复写 container样式 padding-left：0px 和padding-right：0px； 然后在该容器子元素 row复写样式 .row{margi
css中margin、padding属性用法
12-23 513
样式单边距margin使你能够在网页上的元素的矩形区域外部添加空隙。需要记住的 是,margin属性处理的是元素外面的间距。 以下是设置边距的样式属性 margin-top:设置上边距 margin-right:设置右边距 margin-bottom:设置下边距 margin-left:设置左边距 margin:在一个属性中设置上、右、下、左边距。 希望每个周围边距为15个像素，可
el-row的gutter注意事项
最新发布
weixin_41171651的博客
12-01 2461
注意gutter会使el-row的容器宽度增加20px，在全屏宽度时候可能会导致出现横向滚动条。可在el-row父元素设置。
margin的具体使用方法
qq_44663029的博客
06-03 1481
定义和方法 margin 属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值 案例一 margin:5px 10px 15px 20px; 上外边距是 5px 右外边距是 10px 下外边距是 15px 左外边距是 20px 案例二 margin:5px 10px; 上外边距和下外边距是 5px 右外边距和左外边距是 10px margin:0px auto;时，左右margin自动会使当前元素水平居中对齐 margin:auto 0px;时，左右margin自动会使当前元
PHP笔记——Yii2学习笔记4（视图入门之布局，前端资源）
Coder.Monkey的工作簿
12-22 811
一、视图 通过之前的笔记，以及 参考： 应用结构（Application Structure）: 视图（Views） - Yii 2.0 权威指南 - 文档 - Yii Framework 中文网3 Yii2.0灵活使用AppAssets管理CSS样式及JS脚本_眼镜君-CSDN博客 应用结构（Application Structure）: 前端资源（Assets） - Yii 2.0 权威指南 - 文档 - Yii Framework 中文网 ...
html——使用bootstrap的栅格布局，用row后出现横向滚动条
知北行的博客
04-17 1184
原因：row默认有：margin-left:-15px; margin-right:-15px 解决办法：row所在div的外层需要包裹 container或者container-fluid(通常使用该类)的div，即在row外面创建一个类为container或者container-fluid的 div标签 container与container-fluid的区别： 1、container-fl...
bootstrap栅格系统
ice-bear
10-31 154
简介 栅格系统
关于margin解决每行最后多出的右间距---最优方法
m0_61487366的博客
12-13 687
解决方法3-2:更改下布局，再多包一层div，减去多余的距离。推荐指数：???????????????? 解决方法3-2:(但是这也不是最优方法哦，不计算宽度了，而是再减回去距离。不过工作中可以用) <style> .box{ width: 705px; margin: 30px auto; background-color: beige; overflow: hidden; } .item{ width: 16...
Element-UI 使用el-row 分栏布局
热门推荐
圣人男的博客
03-15 8万+
使用过个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理， 代码如下 <template> <el-row :gutter="20" class="el-row" type="flex" > <el-col :span="8" v-for = "(it...
bootstrap - 响应式标题栏
dbrb71278的博客
10-21 276
先要拆分： 　　.navbar 先变成相对定位 设置最小高度为50px； 设置底部边距为20px 然后设置一个 透明边框！ 边框倒角 4px //@media (min-width:768px) - 最小宽度为 768px 时生效（大于等于 768px的时候） 　　.navbar-default 一上来就设置了个背景和边框。 default 对应的...
Bootstrap学习1：bootstrap4.0基础
D_evin_的博客
09-18 748
Bootstrap4.0基础 一、Bootstrap的简介和作用 1.Bootstrap的简介 - Bootstrap是由twitter公司设计师基于html，css，js开发的简洁、开源、强大、优雅的UI框架。 - UI框架就是能够快速构建html架构的框架。 - 内置了大量的css类，供元素使用。 - Bootstrap由一个css库和一个js库组成，因为在整个ui框架中还会有许多动态需效果需要js来完成，因此，Bootstrap在动态部分是依赖jquery一个js类库完成的。`Bootst
后台管理模板metronic
Hello World
05-05 3572
1.简介 　　是一个基于Bootstrap 3.x的高级管理控制面板主题。Bootstrap Metronic - 是一个完全响应式管理模板。基于Bootstrap3框架。高度可定制的，易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。包含7个主题，高达100个左右的实例页面，非常丰富页面展示效果，包括表单，表格，地图，日历… 2.7套模板截图
如何去除BootStrap栅格系统默认的15px的padding
EddieTries的博客
06-27 1万+
BootStrap的栅格系统对于响应式的网页开发非常方便，在使用栅格系统的时候可以非常方便的时候row和col-*-*来控制布局。但是col-*-*默认会带15像素的左右padding，这个会比较困扰。解决方案可以在row的class上添加no-gutter，这样会去掉表格的默认padding。示例如下： <div class="row no-gutter"> <div cla...
html5中margin是什么意思,css中margin是什么意思，margin作用是什么？
weixin_28814457的博客
06-22 1万+
一、介绍，什么意思？margin为对象外边距间隔属性。如果对一个对象比如div设置了边框后，再设置margin就会观察到这个div外面产生了间距边距。margin作用：设置对象与其它对象的外边距离，外边间隔。比如对象与对象，上下DIV，左右DIV间隔多少，可以使用margin实现。.css5{margin:10px}设置html中class=css5对象的外边距(包括上、左、下、右)分别为10px...
Metronic Bootstrap框架详解：响应式设计与功能集成
"基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍" Bootstrap Metronic是一个高级的前端开发框架，它基于Bootstrap 3.x版本，旨在提供一个全面、响应式的UI解决方案。该框架集成了一系列强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值