Question

在twitter引导程序中使用媒体网格时，如果我在一行中有4个跨度然后缩小浏览器，则这些变小，最终会叠加为4个全宽行。这很好，但我想在其中一个断点之间将它们排列为2列，最后将主题排列为一个。换句话说，默认情况下，它似乎从4列直接变为1，但我希望它在两列之间。我怎样才能做到这一点。

Answer 1

我假设你正在使用bootstrap响应。如果您使用未修改的版本而不是您需要做的就是创建另一个媒体查询，其中每个具有span *类的div占用50％的宽度。为了与bootstrap完全一致，您也希望将gridGutterWidth合并到样式中，并从第一个类型中删除margin-left。根据您使用的css / less / sass为媒体查询执行正确的语法。这个如果是sass或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

你想要实现的是改变响应性。为此，你必须使用DMTinter上面评论中提到的媒体查询@media。

    /* 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) { ... }

这使您能够根据屏幕尺寸更改布局，您可以创建任何类似的响应宽度。

希望这有帮助！

在twitter引导媒体网格中的堆栈元素不同

2 个答案: