基于不同的分辨率，如何使用bootstrap网格系统使设计响应？

Question

<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 {
  }
}

使用bootstrap网格系统，如何做响应式。如下所示。

enter image description here

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

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

Answer 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>

基于不同的分辨率，如何使用bootstrap网格系统使设计响应？

Based on different resolutions, how to make design responsiveness using bootstrap grid system?

css

media-queries

bootstrap-4