首页 > 代码库 > Bootstrap的注意事项

Bootstrap的注意事项

  1. 一定要把行和列包裹在.container中,如果不包裹,行会占据整个body,而container是固定宽度1170px.
  2. Bootstrap是基于border-box为盒模型基准尺寸,即box-sizing属性为border-box,意思是为元素指定的宽和高等于内容+内边距+边框的大小(房屋面积含墙体),所以增加内边距会使内容尺寸变小。
  3. 在每一行中最多可以指定12列,指定的列越多,每一列所分得的列宽也越小,当列宽不足以盛下元素时,溢出部分会被隐藏,这提示我们overflow属性设置为hidden。所以当你设置col-lg-3时,意味着你可以在这一行下写4个这样宽度的列,你若多写一个会自动换行。
  4. 若要做成响应式的网页,千万不要让你的块级元素有固定的较大宽度,或者元素的内外边距有固定的较大宽度,否则在移动设备上会有页边出现,或者有元素溢出。哪怕是margin-left:50%这样的都要小心用,因为你使用这条语句的目标元素自身的宽度很可能会在小屏幕上超过50%的屏幕像素,除非该元素本身也是响应式的。
  5. 负的外边距在右或下时,对独立的元素而言,周围会产生一个磁场,一右边或下边有元素,就会被吸进这个黑洞(减掉相应的外边距);负的外边距在左或上时,会使元素左移或上移相应外边距的距离。

Bootstrap的注意事项