1

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

我有一个需要做出响应的网站。它相对复杂，但对于我们目前的设计来说绝对是可能的。

我的问题是这个。是否有响应式网格系统，或者不依赖于 box-sizing 的完全响应式网格系统的示例：border-box。在查看 Pure & Bootstrap 之后，似乎两者都依赖该属性来使其工作。

在实践中考虑它时，在我看来，需要一个 box-sizing:border-box 模型来允许适当地使用百分比。

为什么我无法使用此方法？此项目绝对需要对 IE7 的支持。我知道有可以用来强制支持的 polyfill 和 htc 文件，但是，该站点的规模和大小使得这些选项难以实施。从我读到的内容来看，这些选项应该适度使用，而这种口径的网站，就是不能适度使用。

谢谢。

4

2 回答 2

0

这是 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 */
于 2014-01-09T16:53:26.530 回答
0

在 Twitter Bootstrap 3 中，您可以删除第 293 行中的 box-sizing。

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

只需删除它并在输入声明中：)

于 2014-01-09T14:30:18.517 回答