栈Twitter的引导媒体网格元素不同(Stack elements in twitter boot

在Twitter的引导时，使用媒体格，如果我有一整行4个跨度再缩这些变得越来越小，最终堆栈在彼此顶部4个全宽行浏览器。 这是不错，但在两者之间，我想在断点一个最终安排主题为一体之前他们，而不是作为安排2列。 换言之默认它似乎从4列直来直去一个，但我想它去2列之间。 我怎样才能做到这一点。

Answer 1:

我假设你正在使用的引导响应。 如果您使用的是未经修改的版本比所有你需要做的就是创建另一个媒体查询，其中，跨度*类每格承担的50％的宽度。 为了与引导是完全一致的是，你要到gridGutterWidth纳入风格也和从第一的型去掉保证金左。 做根据您所使用的CSS /少/青菜媒体查询正确的语法。 这如果青菜或SCSS

下面是一些示例CSS，让你开始：

@media (min-width: 794px) and (max-width: 1060px) {
div[class*="span"] {
    width: 48%;
    margin-left: 2%;
}
div[class="span"]:first-of-type {
    margin-left: 0;
}
}

Answer 2:

那么你想要什么实现的是改变响应性质。 对于您必须使用媒体查询@media为在DMTinter上述评论中提及。

    /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

这使您能够改变每个屏幕尺寸，你可以创建任何类似的响应宽度布局的能力。

希望这可以帮助！

文章来源: Stack elements in twitter bootstrap media grid differently