Question

我得到了一个问以下问题的小提琴手：

四列布局：使用Bootstrap类，将这些div从堆叠编辑为4列布局

HTML：

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="c"></div>
<div class="a"></div>
<div class="d"></div>
<div class="b"></div>

CSS：

div{
  height: 50px;
  min-width: 50px;
}
div.a{
  background: #00FF00;
}
div.b{
  background: #1234FF;
}
div.c{
  background: #FbbF00;
}
div.d{
  background: #FF3344;
}

对于我的回答，我做了以下事情：

HTML：

<div class="row-fluid">
  <div class="span 3">
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="span 3">
    <div class="c"></div>
    <div class="d"></div>
  </div>
  <div class="span 3">
    <div class="c"></div>
    <div class="a"></div>
  </div>
  <div class="span 3">
    <div class="d"></div>
    <div class="b"></div>
  </div>

CSS：

  div{
    height: 50px;
    min-width: 50px;
    display: inline-block;
  }
  div.a{
    background: #00FF00;
  }
  div.b{
    background: #1234FF;
  }
  div.c{
    background: #FbbF00;
  }
  div.d{
    background: #FF3344;
  }

但我被告知我错了没有解释。有没有人知道如何使用bootstrap为上面的代码实现四个堆叠列？

Answer 1

您可以使用解决方案https://jsfiddle.net/yczxm9px/1/

＆＃13;

.div{
    height: 50px;
  }
  div.a{
    background: #00FF00;
  }
  div.b{
    background: #1234FF;
  }
  div.c{
    background: #FbbF00;
  }
  div.d{
    background: #FF3344;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div a">
    
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div b">
    
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div c">
    
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div d">
    
    </div>
  </div>
</div>

＆＃13;

所有类都是bootstrap类。

xs 用于超小屏幕
sm
md
lg 适用于大屏幕。

四列布局引导程序

1 个答案: