css - Bootstrap 网格将列显示为行

Question

我有 Bootstrap 网格

<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 列的网格，而不是列显示为行。我做错了什么？

Answer 1

所以你的第一行就像“标题”，下一行是记录。你的标题是 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>