1

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

4

2 回答 2

2

我假设您正在使用引导响应。如果您使用的是未经修改的版本，那么您需要做的就是创建另一个媒体查询，其中每个具有 span* 类的 div 的宽度为 50%。为了与引导程序完全一致，您也希望将 gridGutterWidth 合并到样式中，并从第一个类型中删除左边距。根据您使用的 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;
}
}
于 2013-01-27T16:38:43.950 回答
0

那么你想要实现的是改变响应性。为此，您必须使用 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) { ... }

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

希望这可以帮助！

于 2013-01-27T16:50:46.263 回答