尝试将列转换为小型设备的行

Question

I am studying this tutorial to convert columns into rows for small devices. Please click it

问题是：它显示了所有列和行。我错过了什么吗？

Plunker link

HTML

<div class="container">
    <div class="row">
      <div class="col">
        User Name
      </div>
      <div class="col">
        Email Address
      </div>
      <div class="col">
        First Name
      </div>
      <div class="col">
        Last Name
      </div>
      <div class="col">
        Is Active
      </div>
    </div>
    <div class="row">
      <div class="col">
        User Name 1
      </div>
      <div class="col">
        Email Address 1
      </div>
      <div class="col">
        First Name 1
      </div>
      <div class="col">
        Last Name 1
      </div>
      <div class="col">
        Is Active 1
      </div>
    </div>
</div>

js依赖

  

angular.min.js

     

angular-route.min.js

     

角animate.js

     

angular-touch.js

     

UI-自举-tpls.min.js

的CSS

  

bootstrap.min.css

Answer 1

.col类（Auto-layout column）是Bootstrap 4.x的新增内容，而plunker包含Bootstrap 3.x.

在4.x：Demo

中使用.col

或在3.x

中使用特定网格单元（.col-md-*）