Bootstrap或Skeleton列宽 - 它们的宽度如何决定

时间:2015-06-12 13:45:22

标签: twitter-bootstrap skeleton-css-boilerplate

在Bootstrap或Skeleton中,如何确定各种列宽?

例如:在Bootstrap中,.col-md-1的宽度为8.33333333%。

在Skeleton中,1列的宽度为4.66666666667%。

它们只是通过思考或者背后有一些科学而随机拍摄的吗?

谢谢

2 个答案:

答案 0 :(得分:0)

8.33%背后的原因是数学。默认情况下,Bootstrap有12列,所以:

100/12 = 8.3333333

如果您访问Bootstrap网站并customise列数,则该百分比将发生变化。例如,如果您选择10列(即更改@grid-columns值),则宽度将变为10%。

答案 1 :(得分:0)

我最近一直在回答这个问题所以我做了这个可能有助于解释发生了什么:https://github.com/mattdell/bootstrap-grid-demo

但基本上这取决于你是使用容器还是容器流体。如果您使用的是容器,则取决于您的屏幕尺寸。假设您具有默认设置,则col-xs-12适用于

  • x-small:介于1px和34px之间,具体取决于屏幕宽度
  • 小:32.5px
  • 中:50.8333px
  • 大:67.5px

计算仅针对(container width - (number of columns * (gutter width * 2))) / number of columns