为了账号安全,请及时绑定邮箱和手机立即绑定

关于BootStrap的container类的三个宽度设定问题

/ 猿问

关于BootStrap的container类的三个宽度设定问题

慕盖茨7059572 2018-12-06 23:57:11
在学习bootstrap时,学习了页面布局container类,这个类用于固定宽度并支持响应式布局,查看源码时是这么写的
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

对于其中的width: 1170px;不理解,在学习CSS时如果是

#divdemo {
width: 1170px;
}

这个应该是设置的内容的宽度,而div的实际宽度还要加上padding,但是bootstrap中设置的width按照效果来看,直接将div的宽度设置上了1170px,和CSS有悖,不知道这一块如何解释?          

查看完整描述

1 回答

已采纳
?
聪明的汤姆

建议先了解一下css的盒模型,这里的container应该把box-sizing设置成了border-box边距盒子,内容的总宽度就是你设置的width,当一个盒子宽度为100%的时候还可以设置padding并且还不会溢出,给篇参考文章你看看css盒模型

查看完整回答
1 反对 回复 2018-12-07
  • 慕盖茨7059572
    慕盖茨7059572
    多谢回答,确实在源码中有 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 的选择器将除了某几个元素除外的元素都设置成了IE的盒模型,第一次接触IE盒模型,多谢指教。 另外想问下,是不是因为IE的这种不守规则的做法让前端开发人员对IE的印象不好? 我看FF和Chrome对相关CSS的规则都是比较遵守。
  • 聪明的汤姆
    聪明的汤姆
    别说前端开发人员了,像一些用户都觉得不好吧

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信