不依赖于框大小的响应式 CSS 网格



我试图在谷歌和这个网站上搜索这个问题的答案。

我有一个网站需要做出回应。它相对复杂,但以我们目前的设计来看,这是绝对可能的。

我的问题是。有没有一个响应式网格系统,或者一个完全响应的网格系统不依赖于框大小的例子:边界框。看了Pure&Bootstrap,似乎两者都依赖于这一特性使其发挥作用。

在实践中思考时,在我看来,需要一个框大小:边框框模型来适当地使用百分比。

为什么我不能使用这种方法?该项目绝对需要IE7的支持。我知道有polyfill和htc文件可以用来强制支持,然而,这个网站的规模和大小使这些选项很难实现。根据我所读到的,这些选项应该适度使用,而对于这样一个网站来说,它就是不能适度使用。

谢谢。

在Twitter Bootstrap 3中,您可以删除293行中的框大小。

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

只需删除此项并在输入声明中:)

这里有一个Bootstrap 2.3.x网格的例子,它只使用移动第一,它以768分钟的宽度启动,你可以更改这个值。要让IE7和IE8看到这一点,请使用Respond.js并确保阅读他们的文档。基本上,您需要本地链接(相对路径)到Respond.js.的CSS

这不依赖于框大小:边框框。

@media (min-width: 768px) {
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.row {
width: 100%;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both }
.row [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
float: left;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
}
.row [class*="span"]:first-child { margin-left: 0 }
[class*="span"].pull-right,
.row [class*="span"].pull-right { float: right }
.row .span12 { width: 100% }
.row .span11 { width: 91.43646408839778% }
.row .span10 { width: 82.87292817679558% }
.row .span9 { width: 74.30939226519337% }
.row .span8 { width: 65.74585635359117% }
.row .span7 { width: 57.18232044198895% }
.row .span6 { width: 48.61878453038674% }
.row .span5 { width: 40.05524861878453% }
.row .span4 { width: 31.491712707182323% }
.row .span3 { width: 22.92817679558011% }
.row .span2 { width: 14.3646408839779% }
.row .span1 { width: 5.801104972375691% }
.row .offset12 { margin-left: 105.52486187845304% }
.row .offset12:first-child { margin-left: 102.76243093922652% }
.row .offset11 { margin-left: 96.96132596685082% }
.row .offset11:first-child { margin-left: 94.1988950276243% }
.row .offset10 { margin-left: 88.39779005524862% }
.row .offset10:first-child { margin-left: 85.6353591160221% }
.row .offset9 { margin-left: 79.8342541436464% }
.row .offset9:first-child { margin-left: 77.07182320441989% }
.row .offset8 { margin-left: 71.2707182320442% }
.row .offset8:first-child { margin-left: 68.50828729281768% }
.row .offset7 { margin-left: 62.70718232044199% }
.row .offset7:first-child { margin-left: 59.94475138121547% }
.row .offset6 { margin-left: 54.14364640883978% }
.row .offset6:first-child { margin-left: 51.38121546961326% }
.row .offset5 { margin-left: 45.58011049723757% }
.row .offset5:first-child { margin-left: 42.81767955801105% }
.row .offset4 { margin-left: 37.01657458563536% }
.row .offset4:first-child { margin-left: 34.25414364640884% }
.row .offset3 { margin-left: 28.45303867403315% }
.row .offset3:first-child { margin-left: 25.69060773480663% }
.row .offset2 { margin-left: 19.88950276243094% }
.row .offset2:first-child { margin-left: 17.12707182320442% }
.row .offset1 { margin-left: 11.32596685082873% }
.row .offset1:first-child { margin-left: 8.56353591160221% }
}/* end min-width */

最新更新