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

Question

在学习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有悖，不知道这一块如何解释？          

Answer 1

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