css - Bootstrap : Force columns to stack up vertically on mobile (responsive design)

Question

我有以下代码:

<div class='carousel'>
    <div class='data-ng-repeat='{{ repeat }}'{% endif %}>
        <div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat='i in items'>
          <div class='valign'>
            <p class='body'>
              <span> {$ i.statistic $} </span>
              <span> {$ i.text $} </span>
            </p>
          </div>
        </div>
       </div>
</div>

使用以下 CSS:

.vdivide:not(:last-child) {
    border-right: 1px solid rgba(196, 187, 159, 0.63);
}
.carousel {
   height: 300px;
}

因此我有 4 列，用横线分隔它们。 当我切换到移动屏幕时，我希望它们能很好地堆叠起来。 知道我怎么能用 bootstrap 做到这一点吗？

Answer 1

除了使用正确的列类名称外，您无需执行任何操作。看the examples provided :

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

因此，对于桌面上的 4 列(堆叠在其他地方)，只需在重复的 div 上使用 .col-md-3，摆脱 .col -xs-12.col-sm-3.

注意:我强烈建议不要将您自己的演示 CSS 类添加到您的列中。保持网格完全独立并在其中添加额外的标记以实现相同的目的:您将让自己的生活变得更加简单。