Bootstrap 较小的媒体查询中的 div

Question

我目前连续显示 4 个 div。当 window 变小时，它变成 2 行，每行有 2 个 div。我正在尝试添加一个中间层，它在顶部折叠成 3 个 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 之间添加第三个 class，但未能成功。我不太确定我正在尝试做的事情的术语 - 我认为这可能是我在寻找答案时遇到问题的原因

谢谢

Answer 1

我通过更新每个 div 来应用以下类:

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

Answer 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>

Answer 3

Boostrap 使用 4 个预定义的宽度断点（xs、sm、md、lg）据我了解，您想在该大小（<768px 和 <992px）

之间创建一个新的媒体查询

为此，您必须创建它并在您的 div

中添加一个新的 class

例如..

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

}

Fiddle

Bootstrap 较小的媒体查询中的 div

Bootstrap divs in smaller media queries

css

twitter-bootstrap

twitter-bootstrap-3