Bootstrap 在断点处添加自定义 css

Question

例如

Users

<div class="col-md-my">
</div>

就像引导程序在断点处更改宽度一样。

设置新类.xx { color: black; } .yy { color: red; }

当它的宽度超过md断点时，css添加类col-md-my

当它的宽度在md断点下时，css添加类xx

yy 和 xx 是自定义 css。

如何通过 bootstrap 变量和函数添加

Answer 1

信息：

此查询中的任何内容（576px 之前的任何内容）：

@media (max-width: 575.98px) { 

  .custom-txt-color {color: #000000;}

}

..会变黑(#000000)

---

---

当达到 576px 时：

@media (min-width: 576px) and (max-width: 767.98px) { 

  .custom-txt-color {color: #666000;}

}

...它会变成深绿色(#666000)

---

---

如果没有声明 max-width 则它​​保持不变：

@media (max-width: 575.98px) { 

  .custom-txt-color {color: #000000;}

}

.....文本是黑色的，然后：

@media (min-width: 576px) { 

  .custom-txt-color {color: #666000;}

}

..... 现在它是深绿色并保持深绿色，因为没有最大宽度。

A practical tool for testing screen sizes<<<<

可用断点片段： (directly from Bootstrap 4.6)：

/* Extra small devices  (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* Small devices  (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }