在较小的媒体查询中引导 div答案

【问题标题】：Bootstrap divs in smaller media queries在较小的媒体查询中引导 div
【发布时间】：2015-06-22 05:15:30
【问题描述】：

我目前有 4 个 div 连续显示。当窗口变小时，它变成 2 行，每行有 2 个 div。我正在尝试添加一个中间层，它在顶部折叠成 3 个 div（下面有一个额外的 div）

 <div class="row">
        <div class="col-xs-6 col-sm-3">
          <p>1</p>
        </div>
        <div class="col-xs-6 col-sm-3">
          <p>2</p>
       </div>
        <div class="col-xs-6 col-sm-3">
          <p>3</p>
        </div>
        <div class="col-xs-6 col-sm-3">
            <p>4</p>
        </div>
</div>

我尝试在 col-xs-6 和 col-sm-3 之间添加第三类，但无法使其正常工作。我不太确定我想要做什么的术语 - 我认为这可能是我在寻找答案时遇到困难的原因

谢谢

【问题讨论】：

所以你希望第三个 div 在顶部，第四个 div 在第二行，在较小的屏幕上？ Like this
@TheUknown 当您缩小浏览器时，我希望发生这种情况：postimg.org/image/f02mgwg4t 目前第 1 步直接进入第 3 步。但我想添加第 2 步（但仍保留第 1 步和 3)
好的，我刚试过
已经奏效了 :)

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Boostrap 使用 4 个预定义的宽度断点（xs、sm、md、lg）据我了解，您想在该尺寸（

为此，您必须创建它并在您的 div 中添加一个新类

例如..

@media (min-width: 768px) and (max-width: 800px) { 
  .row > .col-ss-4 {
    width: 33.3%;
  }

}

Fiddle

【讨论】：

【解决方案2】：

试试这个

https://jsfiddle.net/kokilajs/erf2zcrp/

<div class="row">
        <div class="col-xs-4 col-sm-3 color">
          <p>1</p>
        </div>
        <div class="col-xs-4 col-sm-3 color">
          <p>2</p>
       </div>
        <div class="col-xs-4 col-sm-3 color">
          <p>3</p>
        </div>
        <div class="col-xs-6 col-sm-3 color">
            <p>4</p>
        </div>
        <div class="col-xs-6 hidden-sm color">
            <p>5</p>
        </div>
</div>

【讨论】：

【解决方案3】：

我通过更新每个 div 以应用以下类来实现此功能：

col-md-3 col-sm-4 col-xs-6

【讨论】：

检查这个问题stackoverflow.com/questions/20242455/…