基于不同的分辨率，如何使用引导网格系统进行设计响应？答案

【问题标题】：Based on different resolutions, how to make design responsiveness using bootstrap grid system?基于不同的分辨率，如何使用引导网格系统进行设计响应？
【发布时间】：2022-01-12 01:40:49
【问题描述】：

<div class="row">
    <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 data-one">
      <one />
    </div>
    <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 dashboard-two">
      <two />
    </div>
    <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 dashboard-three">
      <three />
    </div>
  </div>
  
  @media screen and (min-width: 500px) and (max-width: 992px) {
  .data-one {
  }
  .data-two {
  }
  .data-three {
  }
}

使用引导网格系统，如何做出响应。如下所示。

enter image description here

我也有类似的问题，当元素相互接触时，会发生碰撞（相互交叉）。

任何示例都会有所帮助，谢谢。

【问题讨论】：

标签： css bootstrap-4 media-queries

【解决方案1】：

因此，在包含三个项目的 Bootstrap 行中，使用 col-md-12 作为其中一个类并没有太大的语义意义。本质上是因为 col-12 应该跨越整个宽度。对于响应式 Bootstrap 设计，将col-lg-4 用于大屏幕，col-md-4 用于中型屏幕在语义上是正确的，col-sm-4 将用于手机等移动设备。我添加了w-100 100% 宽度和text-center 将文本与中心对齐。请参阅下面我所做的更改。

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<div class="container w-100">
<div class="row text-center">
    <div class="col-lg-4 col-md-4 col-sm-4">
      One
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
      Two
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
      Three
    </div>
  </div>
</div>

【讨论】：