引導網格顯示爲行

列我有自舉網格引導網格顯示爲行

<div class="container"> 
    <div class="row"> 
      <div class="col-sm-1">Column 1</div> 
      <div class="col-sm-2">Column 2</div> 
      <div class="col-sm-1">Column 3</div> 
    </div> 
    <div ng-repeat="Item in Items"> 
     <div class="row"> 
      <div class="col-sm-2">{{Item.Field1}</div> 
      <div class="col-sm-4">{{Item.Field2}}</div> 
      <div class="col-sm-6">{{Item.Field3}}</div> 
     </div> 
    </div> 
</div>

應該顯示3列的網格，而不是列顯示爲行。我究竟做錯了什麼？

來源

2016-08-05 ElenaDBA

http://www.bootply.com/szsSpLhyUL – j08691

看到你應用class =「col-sm-1」到每一個地方，因此它看起來像行，所以刪除class =「col-sm-1」項目。 – Ranjan

從項目中刪除它並沒有幫助 – ElenaDBA

因此，您的第一行就像「標題」，下一行是記錄。您的標題是1-2-1，但您的記錄是2-4-6 =>它不會排隊。爲了防止它在小屏幕上堆疊，您可以改爲使用col-xs-x。

<div class="row"> 
     <div class="col-xs-3">Column 1</div> 
     <div class="col-xs-6">Column 2</div> 
     <div class="col-xs-3">Column 3</div> 
</div> 
<div ng-repeat="Item in Items"> 
    <div class="row"> 
     <div class="col-xs-3">{{Item.Field1}</div> 
     <div class="col-xs-6">{{Item.Field2}}</div> 
     <div class="col-xs-3">{{Item.Field3}}</div> 
    </div> 
</div>

來源

2016-08-05 18:50:52 dMd

記住組合列大小的能力，例如：'class =「col-xs-3 col-sm-1」'將根據寬度的視點調整'25％如果沒有指定md，lg或xl列的大小，則對於小視點（寬度爲545px到768px）或更大的小視點（寬度從0px到544px）和寬度爲'8.33％'。 – fyrye

試過了，但沒有任何變化 – ElenaDBA

@ElenaDBA，嗯......你應該試着檢查一下col，看看你在樣式上看到了什麼......你試過bootstrap的CDN而沒有其他的東西嗎？ – dMd

我假設你希望他們總是排隊。下注方式是這樣的：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-2">Column 1<br> 
     {{Item.Field1}} 
     </div> 
      <div class="col-sm-2">Column 2<br> 
     {{Item.Field2}}</div> 
      <div class="col-sm-2">Column 3<br> 
     {{Item.Field3}}</div> 
    </div> 
</div>

或者，您可以替換br幷包裝div中的元素並顯示：block;

工作示例這裏：

http://www.bootply.com/tb10AKqzM1

來源

2016-08-05 18:53:55 JPeG

這是否佔多行/你已經刪除了循環... – ElenaDBA

其他答案更接近你要找的東西，但這裏有一個修改後的版本，其中包含循環等重複元素：http://www.bootply.com/ lxVZpGrIFv – JPeG

把代碼中的自己擁有，而是實際上做的工作。當視口大小低於小視圖尺寸時（如此xs，超小尺寸），它將放入行中。如果你想查看所有的查看大小，那麼你必須添加xs而不是s到所有的類。

來源

2016-08-05 18:55:35 the12