Width of div is not changing with window size even when specified in percentage?
I have the following code inside a media query (from Bootstrap):
@media (min-width: 768px) {
.col-sm-9 {
float: left;
width: 75%;
}
}
When resizing the window between 768px and 992px, the width of my column is always 562.5px. The width of wrapping div with the row class is always 750px. Why is that? I always thought that specifying width in percent meant that the width of our element will always be 75%. For example, when window is 992px wide it would be 744px wide and when window is 768px wide it would be 576px wide.
Am I missing something?
That is because bootstrap's own rule set the container to a fixed width, which also is not the same as its min-width rule value.
/* 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 */
}
}
If you want it to change while resizing the viewport, you could like this
Fiddle demo
@media (min-width: 768px) {
.col-sm-9 {
width: 75%;
}
.container {
width: 100%;
}
}
@media (min-width: 992px) {
.container {
width: 100%;
}
}
Or, if you want it to be fluid all the time, simply change the container class to container-fluid
Fiddle demo
链接地址: http://www.djcxy.com/p/88330.html上一篇: css中的<div>边缘可能吗？