引导网格显示为行

列我有自举网格引导网格显示为行

<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