Html div的宽度不随窗口大小而变化，即使以百分比指定？

我在媒体查询中有以下代码（来自引导）：

在768px和992px之间调整窗口大小时，我的列的宽度始终为562.5px。用

行

类包装

div

的宽度始终为750px。为什么呢？我一直认为以百分比指定宽度意味着元素的宽度将始终为75%。例如，当窗口为992px宽时，它将为744px宽，当窗口为768px宽时，它将为576px宽

我错过什么了吗

这是因为bootstrap自己的规则将容器设置为固定宽度，这与它的

minwidth

规则值不同

/* bootstrap rules */

@media (min-width: 768px) {
  .container {
    width: 750px;                /*  75% of 750px = 562.5px  */
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;                /*  75% of 970px = 727.5px  */
  }
}

如果希望在调整视口大小时对其进行更改，可以如下所示

或者，如果您希望它始终是流体，只需将

容器

类更改为

容器流体

这是因为bootstrap自己的规则将容器设置为固定宽度，这与它的

minwidth

规则值不同

/* bootstrap rules */

@media (min-width: 768px) {
  .container {
    width: 750px;                /*  75% of 750px = 562.5px  */
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;                /*  75% of 970px = 727.5px  */
  }
}

如果希望在调整视口大小时对其进行更改，可以如下所示

或者，如果您希望它始终是流体，只需将

容器

类更改为

容器流体

---

您是在引导库中覆盖css还是创建单独的css文件否，我没有覆盖它，也没有单独的文件。请确保在包含引导cdn后包含自定义css样式表。这将覆盖引导的css。如果需要，请告诉我workd@Jagrati是的，我在引导后加入了我的样式表。假设其他包装器使容器固定宽度是否正确？检查div时会发生什么情况？调整浏览器窗口大小时，您应该看到宽度的变化以及应用了哪些媒体查询您是否覆盖引导库中的css或创建单独的css文件否，我没有覆盖它，也没有单独的文件。请确保在包含引导cdn后包含自定义css样式表。这将覆盖引导的css。如果需要，请告诉我workd@Jagrati是的，我在引导后加入了我的样式表。假设其他包装器使容器固定宽度是否正确？检查div时会发生什么情况？调整浏览器窗口的大小时，您应该看到宽度的变化以及应用的媒体查询

@media (min-width: 768px) {
  .col-sm-9 {
    width: 75%;
  }
  .container {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .container {
    width: 100%;
  }
}