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

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

@media (min-width: 768px) {
  .col-sm-9 {
    float: left;
    width: 75%;
  }
}

在768px和992px之间调整窗口大小时，我栏的宽度始终为562.5px。 包装的宽度div与row级始终是750px。 这是为什么？ 我一直认为用百分比指定宽度意味着我们元素的宽度始终为75％。 例如，当窗口宽度为992px时，宽度为744px，窗口宽度为768px时宽度为576px。

我错过了什么吗？

---

这是因为引导程序自己的规则将容器设置为固定宽度，这也与其min-width规则值不同。

/* 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  */
  }
}

如果您希望在更改视口大小时更改它，您可能会喜欢这一点

小提琴演示

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

或者，如果您希望它始终处于流体状态，只需将container类更改为container container-fluid

小提琴演示

链接地址: http://www.djcxy.com/p/88329.html

上一篇: Width of div is not changing with window size even when specified in percentage?

下一篇: Twitter's Bootstrap 3 grid, changing breakpoint and removing padding