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

【问题标题】：static width at col-xl-* (Bootstrap 4)?col-xl-* (Bootstrap 4) 的静态宽度？
【发布时间】：2017-09-05 13:28:13
【问题描述】：

如何在 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>

谢谢。

【问题讨论】：

将其包装在 .container 元素中。顺便说一句，Bootstrap .col-* 应始终位于 .row 内，而 .row 又应始终位于 .container 或 .container-fluid 内。

标签： html css twitter-bootstrap bootstrap-4 grid-system

【解决方案1】：

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

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

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

&lt;div class="your-class"&gt;Hello&lt;/div&gt;

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

【讨论】：