将Bootstrap列从左到右排序改为从上到下排序

Question

我正在使用循环调用Bootstrap列：

<div class="col-xs-2">
Content
</div>

默认情况下，Bootstrap 从左到右对列进行排序：

[ 1 ] --> [ 2 ] --> [ 3 ]
[ 4 ] --> [ 5 ] --> [ 6 ]
[ 7 ] --> [ 8 ] --> [ 9 ]

对于这个循环，我想要从上到下排序：

[ 1 ]  [ 4 ]  [ 7 ]
  V      V      V
[ 2 ]  [ 5 ]  [ 8 ]
  V      V      V
[ 3 ]  [ 6 ]  [ 9 ]

我应该怎样在使用常规的Bootstrap列时最好实现这一点？

- GeorgeButter

Answer 1

你可以在每个列中使用内部数组项作为一种选择，但我认为这可能需要不止一个循环。

标记结构将如下所示：

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="array-item">1</div>
            <div class="array-item">2</div>
            <div class="array-item">3</div>
        </div>
        <div class="col-xs-4">
            <div class="array-item">4</div>
            <div class="array-item">5</div>
            <div class="array-item">6</div>
        </div>
        <div class="col-xs-4">
            <div class="array-item">7</div>
            <div class="array-item">8</div>
            <div class="array-item">9</div>
        </div>        
    </div>
</div> 

这里是Fiddle。显然，这不是问题，因为div是块级元素，但如果您想使用其他内容，请确保它具有display:block;属性。您没有标记您是否使用PHP或.NET或任何其他东西，但我的下面循环的示例使用C＃。

<div class="container">
    <div class="row">   
        <div class="col-xs-4">
        @for (var i = 0; i < 3; i++) {
            <div class="array-item">array[i]</div>               
        }
        </div>
        <div class="col-xs-4">
        @for (var i = 3; i < 6; i++) {
            <div class="array-item">array[i]</div>               
        }
        </div>
        <div class="col-xs-4">
        @for (var i = 6; i < 9; i++) {
            <div class="array-item">array[i]</div>            
        }
        </div>        
    </div>
</div>

这样做可以让您控制每列内的项目数量。虽然看起来有点凌乱，但应该能够解决问题。

- Matthew Allen

---

谢谢，好答案。我正在使用b@se来创建我的循环。大多数人不使用它，所以我不想让事情变得混乱。我不懂C#，但你的逻辑很有道理。我不知道会有多少个项目，所以我在想我可以计算总数，然后除以3来计算每列应该有多少个项目，以保持布局整齐和方正...也许说起来容易做起来难。 - GeorgeButter

Answer 2

这是一个老问题，但值得更新的答案。在Bootstrap中使用媒体查询结合column-count即可实现此功能。请参见Jsfiddle。

CSS

.threeTwoOneColumns {
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

@media (min-width: 576px) { 
  .threeTwoOneColumns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .threeTwoOneColumns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

HTML

<div class="container-fluid mt-3">
  <div class="row">
    <div class="threeTwoOneColumns">
      <div class="c0">A</div>
      <div class="c1">B</div>
      <div class="c2">C</div>
      <div class="c3">D</div>
      <div class="c4">E</div>
      <div class="c5">F</div>
      <div class="c6">G</div>
      <div class="c7">H</div>
    </div>
  </div>
</div>

- ow3n

---

谢谢！我之前试着用Bootstrap做这个，但是这里用纯CSS更好。 - Allie