html - col-xl-* 的静态宽度(Bootstrap 4)？

Question

我如何在 col-xl-* 中禁止它停止为更大的显示器增长？ 当我在我的笔记本电脑(1280 宽度)和台式机(1920)上查看它时，两者都适用于 col-xl，但它在台式机上太大或在笔记本电脑上太小。

<div class="d-flex justify-content-center align-items-center text-center login-div ">
    <div class="col-md-6 col-sm-8 col-lg-5 col-xl-3 col-10 rounded-10 mask"></div>
</div>

谢谢。

Answer 1

一种选择是使用 media queries并定义一个 max-width，可能用于 Bootstrap 的 xl breakpoint :

@media (min-width: 1200px) { /* xl */

  .your-class {
    background: yellow;
    max-width: 200px;
  }
}

<div class="your-class">Hello</div>

使用上面的代码，如果视口(viewport)宽度至少为 1200px，则类为 .your-class 的元素的最大宽度为 200px。