Html 如何使用Bootstrap使容器在电话设备中具有全宽

无论我如何在CSS文件中尝试，该容器都无法在手机设备中占据全部宽度

我的CSS文件：

@media (max-device-width: 1024px) {

.col-sm-2{
    width: 100%;

}
.container {
    margin: 0 auto;
    width: 100%;
}


.col-sm-10 {
    width: 100%;
}


}

HTML:

轮廓

---

有什么建议吗？

您应该使用

容器流体

类，而不是

容器

，或者如果愿意，您可以使用

sm

，

lg

等后缀，如

容器sm

请参见“尝试容器流体”

<div class="container-fluid">

<h1 >Profile</h1>
</div>

<div class="container-fluid">

<h1 >Profile</h1>
</div>

@media (max-device-width: 1024px) {

.col-sm-2{
    width: 100%;

}
.container {
    margin: 0 auto;
    width: 100% !important;
    padding: 0 !important;
}


.col-sm-10 {
    width: 100% !important;
}


}