Question

我目前有4个div连续显示。当窗口变小时，它变成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之间添加第3类但未能使其正常工作。我不太确定我想做什么的术语 - 我认为这可能是我在寻找答案时遇到困难的原因

由于

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）根据我的理解，您希望在这些尺寸之间创建一个新的媒体查询（＆lt; 768px和<992px）

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

例如......

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

}

Fiddle

Bootstrap divs在较小的媒体查询中

3 个答案: