CSS Bootstrap3中col-lg和col-md的区别

在本文中，我们将介绍Bootstrap3中的两个常用CSS类别，即col-lg和col-md，以及它们之间的区别。这两个类别在响应式设计中起到了重要的作用，用于创建适应不同设备和屏幕尺寸的响应式网页布局。

阅读更多：CSS 教程

col-lg和col-md的定义

在Bootstrap3中，col-lg和col-md是Grid系统中的两个CSS类别，用于设置网格布局的列的宽度。

col-lg类别用于大型屏幕（大于1200px）的布局，而col-md类别用于中型屏幕（大于992px，小于1200px）的布局。这两个类别可以应用于div元素，并使用.col-lg-和.col-md-的形式设置列的宽度。

区别比较

决定因素：
- col-lg：主要用于较大的屏幕和显示器，这些屏幕的宽度通常大于1200px。
- col-md：主要用于中型屏幕，这些屏幕的宽度通常在992px到1200px之间。
数值设置：
- 每个类别都使用等分布的栅格系统，可以将每个行分为12个列。
- 通过添加.col-lg-或.col-md-类来定义要使用的列数，其中*代表数字（1到12）。
布局调整：
- 当窗口宽度超过1200px时，col-lg类别将应用于网格布局。
- 当窗口宽度在992px和1200px之间时，col-md类别将应用于网格布局。
响应式表现：
- 当屏幕宽度较小时，col-lg类别的布局将自动调整为相同的col-md类别布局。
- 当屏幕宽度较大（大于1200px）时，col-md类别布局将显示为更窄的布局。

示例说明

以下示例说明了在不同设备和屏幕尺寸下，使用col-lg和col-md类别创建响应式布局的用法。

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8">
      <p>这是一个占据一半空间的列</p>
    </div>
    <div class="col-lg-6 col-md-4">
      <p>这是一个占据一半空间的列</p>
    </div>
  </div>
</div>

上述示例中，使用col-lg-6和col-md-8的div元素将在大型屏幕上占据一半的空间，在中型屏幕上占据2/3的空间。另一个div元素则使用col-lg-6和col-md-4，在大型屏幕上占据一半空间，在中型屏幕上占据1/3的空间。

这样，无论是在较大的屏幕上还是在中型屏幕上，布局都会以合适的比例进行显示和调整。

总结

在本文中，我们介绍了Bootstrap3中的col-lg和col-md两个CSS类别以及它们之间的区别。

要点总结如下：
– col-lg适用于大型屏幕，col-md适用于中型屏幕。
– 两个类别都使用等分布的栅格系统，将屏幕分为12列。
– col-lg的布局在1200px以上的大屏幕上应用，col-md的布局在992px到1200px之间的中型屏幕上应用。
– 当屏幕较小时，col-lg布局将自动调整为相同的col-md布局。
– 当屏幕较大（大于1200px）时，col-md布局将显示为更窄的布局。

通过合理使用col-lg和col-md类别，可以创建出在不同屏幕尺寸上都能良好适应的响应式网页布局。这使得网站能够在各种设备上提供一致的用户体验。