[css] Bootstrap中“col-md-4”,“col-xs-1”,“col-lg-2”中数字的含义



Answers

Bootstrap网格系统有四个类:
xs(手机)
sm(用于平板电脑)
md(用于桌面)
LG(适用于较大的桌面)

上面的类可以组合起来创建更加动态和灵活的布局。

提示:每个类都会放大,因此如果您希望为xs和sm设置相同的宽度,则只需指定xs。

好的,答案很简单,但请继续阅读:

col-lg-代表≥ 1200px
col-md-代表色谱柱介质≥ 992px
col-xs-代表色谱柱超小≥ 768px

像素数是断点,所以例如当窗口小于768像素(可能是移动设备)时col-xs将目标定位到元素...

我还创建了下面的图片来展示网格系统是如何工作的,在这个例子中,我将它们与3一起使用,例如col-lg-6以向您展示网格系统如何在页面中工作,了解lgmdxs是如何工作的响应窗口大小:

Question

我对新的Bootstrap中的网格系统感到困惑,特别是这些类:

col-lg-*
col-md-*
col-xs-*

(其中*代表某个数字)。

任何人都可以请解释以下内容:

  1. 这个数字如何对齐网格?
  2. 如何使用这些数字?
  3. 他们实际上代表什么?



重点是这样的:

col-lg-* col-md-* col-lg-* col-md-* col-xs-* col-sm定义在这些不同的屏幕尺寸下有多少列。

例如:如果您希望桌面屏幕和手机屏幕中有两列,请在列中放置两个col-md-6和两个col-xs-6类。

如果你希望在桌面屏幕上有两列,并且在手机屏幕上只有一列(即两行堆叠在一起),则在列中放置two col-md-6和两个col-xs-12 ,因为总和将是24他们将自动堆叠在彼此的顶部,或只是离开xs风格。




Related