bootstrap修改col的间距
web Bootstrap 2019-09-11 4443 0
关于本站

本人承接php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

1871516 1694 18
最新评论
报错 in promise) MiniProgramError {"errMsg":"removeTabBarBadge:fail not TabBar page"} Object
评 人人商城小程序昵称变成了“微信用户”头像也不显示?getUserInfo换成getUserProfile
按照这个修改后报错: ReferenceError: n is not defined at success (index.js? [sm]:3) at Function.forEach.u.<computed> (VM10210 WAService.js:2) at :55237/appservice/<api login success callback function> at Object.success (VM10210 WAService.js:2) at r (VM10210 WAService.js:2) at VM10210 WAService.js:2 at w (VM10210 WAService.js:2) at VM10210 WAService.js:2 at VM15 asdebug.js:1 at I (VM15 asdebug.js:1)(env: Windows,mp,1.05.2105170; lib: 2.17.0)
评 人人商城小程序昵称变成了“微信用户”头像也不显示?getUserInfo换成getUserProfile
asfdsafasdf
评 ;!function(){}();
:kaixin:
评 thinkphp 3.2.3 Runtime\Logs日志文件太多怎么关闭日志功能
其他浏览器呢
评 对服务器的请求已遭到某个扩展程序的阻止
文章标签更多
ThinkPHP (165)
Mysql (39)
DedeCms (33)
jQuery (44)
证件照 (1)
setInc (3)
setDec (3)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

用bootstrap布局时会产生一些问题,比如col水平间距过大

修改方法:

重新设置col之间的间距

[class*="col-"]{
   padding: 5px;
}

在bootstrap.css随便搜索col-md会发现,col每列之间之所以有间距,是因为col里面的左右内边距都是15px形成的,这样col里面的内容与内容之间间距就是30px。想修改内边距,我们只需要修改padding-right: 15px; padding-left: 15px;的值就可以了。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}


另:


container左右内边距是15px

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
row左右外边距是-15px;
.row {
  margin-right: -15px;
  margin-left: -15px;
}

所以,下面的container和row是一样宽的,如果都铺背景色,它们是重合的

<div class="container">
	<div class="row"></div>
</div>

版权声明:本篇文章来源于网络。 来源链接

相关推荐
AdminLTE管理后台提示框,bootstrap框架提示框Tooltip
Bootstrap | 2018-08-16 8413
AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法: html代码: <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...
bootstrap栅格系统一行5列或8列
Bootstrap | 2019-07-05 3541
Bootstrap栅格系统一行5列或8列怎么实现? Bootstrap栅格系统五等分或八等分? 在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。  要2等分,使用col-md-6即可;  要3等分,使用col-md-4即可;  要4等分,使用col-md-3即可;&nbs...
评论:0条
评论加载中...
发表评论