Bootstarp5第二弹

四、网格系统

网格系统根据设备屏幕尺寸大小分为6类：

col-<!--任意屏幕-->
col-sm-<!--平板 - 屏幕宽度等于或大于 576px。-->
col-md-<!--桌面显示器 - 屏幕宽度等于或大于 768px。-->
col-lg-<!--大桌面显示器 - 屏幕宽度等于或大于 992px。-->
col-xl-<!--特大桌面显示器 - 屏幕宽度等于或大于 1200px。-->
col-xxl-<!--超大桌面显示器 - 屏幕宽度等于或大于 1400px。-->

创建等宽响应式列

<div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>

创建不等宽响应式列

<div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-4 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
  </div>

设置某一列的宽度

<div class="row">
    <div class="col">.col</div>
    <div class="col-4">.col</div>
    <div class="col">.col</div>
  </div>

平板和桌面端

<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
  </div>

嵌套列

<div class="row">
		<div class="col-8 bg-warning p-4">.col-8
			<div class="row">
			<div class="col-6 bg-light text-dark p-2">.col-6</div>
			<div class="col-6 bg-secondary text-white p-2">.col-6</div>
			</div>
		</div>
		<div class="col-4 bg-success text-white p-4">.col-4</div>

	</div>

偏移列(offset)

<div class="row">
    <div class="col-md-4 bg-primary text-white">.col-md-4</div>
    <div class="col-md-4 offset-md-4 bg-dark text-white">.col-md-4 offset-md-4</div>
</div>
<div class="row">
    <div class="col-md-3 offset-md-3 bg-primary text-white">.col-md-3 offset-md-3</div>
    <div class="col-md-3 offset-md-3 bg-dark text-white">.col-md-3 offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-6 offset-md-6 bg-primary text-white">.col-md-6 offset-md-6</div>
</div>
<!--不要忘记加上class="row"-->