twitter-bootstrap 网格系统列小于 768px答案

【问题标题】：twitter-bootstrap grid system columns for less than 768pxtwitter-bootstrap 网格系统列小于 768px
【发布时间】：2015-04-28 04:29:29
【问题描述】：

我在一个项目中使用了引导网格系统。

我想拥有：

小于 768 像素和大于 384 像素的 2 列
1 列小于 384 像素

编辑：我怎样才能做出这样的事情？ col-xxs-12（Django 模板示例）：

<div class="row">
    {% for item in product %}
        <div class="col-md-3 col-sm-4 col-xs-6 **col-xxs-12**">
            <div class="well">
                {{item.model}}
            </div>
        </div>
    {% endfor %}
</div>

【问题讨论】：

你能展示一下你到目前为止所做的尝试并解释你是如何陷入困境的吗？
getbootstrap.com/customize/#media-queries-breakpoints 您可以创建和下载可自定义的 Bootstrap 版本，根据需要更改断点。

标签： twitter-bootstrap

【解决方案1】：

作为解决方案

<style>
  @media (max-width: 384px) {
    .hidden-xxs {
      display: none;
    }

    .visible-xxs {
      display: block;
    }
  }
  @media (min-width: 385px) {
    .visible-xxs {
      display: none;
    }
  }
</style>

<div class="row hidden-xxs">
  <div class="col-xs-6">
    visible on less than 768px
  </div>

  <div class="col-xs-6">
    visible on less than 768px
  </div>
</div>

<div class="visible-xxs">
  less than 384px
</div>

【讨论】：