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

问题描述

在twitter bootstrap中使用媒体网格时，如果我有一个横跨4行，然后收缩浏览器，这些变得更小，最终堆叠为4个全宽行在彼此的顶部。这是很好，但在中间，我想在其中一个断点，将它们安排为2列，最终安排主题为一个。换句话说，默认它似乎从4列直到一个，但我想它去到2列之间。如何实现这一点。

In twitter bootstrap when using the media grid if I have 4 spans across a row and then shrink the browser these get smaller and eventually stack as 4 full width rows on top of each other. This is fine but in between I would like in one of the breakpoints to arrange them instead as 2 columns, before eventually arranging theme as one. In other words as default it seems to go from 4 columns straight to one but I want it to go to 2 columns in between. How can I achieve this.

推荐答案

我假设你使用bootstrap响应。如果您使用的是未修改的版本，您需要做的是创建另一个媒体查询，其中每个带有span *类的div占用50％的宽度。为了与引导完全一致，您需要将gridGutterWidth整合到样式中，并从第一类型中删除左边距。根据您使用的css / less / sass，对媒体查询执行正确的语法。这是如果为sass或scss

I assume you're using bootstrap responsive. If you are using an unmodified version than all you need to do is create another media query where every div with a span* class takes on the width of 50%. To be completely consistent with bootstrap, you'd want to incorporate the gridGutterWidth into the style too and remove the margin-left from the first-of-type. Do the correct syntax for the media query based on the css/ less/ sass you are using. This if for sass or scss

这里是一些示例CSS让你开始：

Here's some sample CSS to get you started:

@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;
}
}

这篇关于twitter中的元素引导媒体网格不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！