1. 首頁
  2. 問答
  3. 試圖轉換列成行用於小型設備

試圖轉換列成行用於小型設備

2017-02-25 21 views
0

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

角route.min.js

角animate.js

角touch.js

UI的自舉-tpls.min.js

的CSS

bootstrap.min.css

來源

2017-02-25 Pankaj

回答

1

.col類（Auto-layout column）是Bootstrap 4.x的新增功能，並且該plunker包含Bootstrap 3.x.

使用.col在4.x版：Demo

，或者使用3.x中特定的網格單元（.col-md-*）的

來源

2017-02-25 15:37:50 ZimSystem

+0

可我知道正確的CSS CDN鏈接？ – Pankaj

+0

CDN上的4個alpha 6 http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css，但不認爲它的工作與Angular Bootstrap – ZimSystem

+0

先生，我根據您的更改說明和它幾乎完成。實際上，我試圖實現的是顯示列名稱，它的值在同一個單元格中，然後是下一個列名稱，它的值在同一單元格的下一行中，但是到目前爲止它已開始工作....列正在改變成完美的行.... Upvoted – Pankaj

相關問題

 相關問題