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

时间:2017-09-05 13:28:14

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

我怎样才能禁止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>

感谢。

1 个答案:

答案 0 :(得分:4)

一种选择是使用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>

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