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，可能是自舉的XL breakpoint：

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

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

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

使用上述代碼，以.your-class類元件將具有200像素的最大寬度如果視口寬度至少爲1200px。