媒体查询在移动设备-电话上不能正常工作

Question

我在这里看了类似的问题，并尝试了他们所展示的，人们已经解决了问题，但我没有运气。

我有一个基本的引导4.4.1 CSS文件钩，然后我自己的自定义CSS文件以及。在它的底部，我插入媒体查询:

@media screen and (min-width:176px) and (max-width: 459px) {
divboxshadow_rt {
width: 320%; 
float:left;
background-color: #FFFCCC;
}
body {
width: 100%;
background-color: #fff;
}
.col col-md-8 px-md-6 { 
width:80%; float:left
}
}
@media (min-width:460px) and (max-width: 767px) {

.col-sm-3.col-xs-12{ width:50%; float:left}
.col-sm-4.col-xs-12{ width:50%; float:left}
.col-sm-6.col-xs-12{ width:50%; float:left}
}

这实际上是在开发控制台中运行的，在我的一个浏览器中以响应模式查看它，特别是其中一个iPhone版本。我无意使用这种微不足道的bkg颜色，但它确实显示，因为我改变它。我在常用浏览器和Chrome上都试过我的网站。我有安卓，Galaxy三星9。

是否有一些代码覆盖我需要使用这个工作?或者这里的某些内容看起来不正确，尽管它现在在两个开发控制台(Chrome和Avast)中看起来是正确的?

我需要colths或者body width，在手机模式下更宽一些。div框被错误地揉成一团

我欢迎你们给我的任何反馈。我添加了另一个类，并稍微修改了下面的问题。我无法让那个类重写它的原始类。我做错了吗?即覆盖divboxshadow_rt与媒体查询版本?实际上现在很接近了。我有

<div class="col col-3 .px-md-6 divboxshadow_rt " >

我正在尝试/需要使用插入到上述小型设备的媒体查询中的col- col-md-8来覆盖col-3。它不会推翻它吗?col-3保持原状，在我的反应测试中没有受到影响。也许我没有正确地处理它，但我认为上面的媒体查询会覆盖设置。没有?再次，欢迎任何反馈。

Answer 1

//不需要媒体查询xs的断点，因为它是有效的@media (min-width: 0) { ... }

你只需要写col-12而不是col-xs-12

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

你只能在你的自定义css

中覆盖宽度和浮动样式