Question

我试图在Google和本网站上搜索此答案。

我有一个需要响应的网站。它相对错综复杂，但我们目前的设计绝对可能。

我的问题是这个。是否存在响应式网格系统，或完全响应式网格系统的示例，它不依赖于框大小：边框。看完Pure＆amp; Bootstrap，似乎都依赖于该属性来使其工作。

在实践中考虑它时，在我看来，需要一个盒子大小：边框模型才能适当地使用百分比。

为什么我无法使用此方法？该项目绝对需要支持IE7。我知道有可用于强制支持的polyfill和htc文件，但是，此站点的规模和大小使这些选项难以实现。从我读过的内容来看，这些选项应该适度使用，而且这个版本的网站应该适度使用。

感谢。

Answer 1

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

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

只需删除此输入声明：）

Answer 2

以下是Bootstrap 2.3.x网格的一个示例，它仅首先使用移动设备，它在768分钟的宽度上启动，您可以更改此值。为了让IE7和IE8能够看到这一点，请使用Respond.js并确保阅读他们的文档。基本上你需要本地链接（相对路径）到Respond.js的CSS。

这不依赖于box-sizing：border-box。

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

响应式CSS网格，不依赖于box-sizing

2 个答案: