响应式引导 - 将每行的 div 数量从桌面更改为移动

Question

这里是响应式引导程序的新手。我每行有 2 个 div，桌面上显示 2 行。我使用了 display: inline-block （见下面的链接）：

https://jsfiddle.net/9ya7kb67/

HTML：

<div class="parent">
    <div class="child"> content </div>
    <div class="child"> content </div>
    <div class="child"> content </div>
    <div class="child"> content </div>
</div>

CSS：

.parent {
    width: 200px;
}

.child {
    display: inline-block;
    width: 80px;
}

但是，我想将此布局保留在桌面上，但在移动设备上使用响应式引导程序将其更改为每行 1 个 div（4 行）。我怎样才能做到这一点？

Answer 1

在此处查看其网格系统的引导文档：http://getbootstrap.com/css/#grid-example-mixed-complete

有 4 种不同类型的类 col-sm col-xs col-md col-lg 每一种都适合不同的屏幕尺寸，您可以将它们组合起来为您的网站制作动态网格。

<div class="row">
  <div class="col-xs-12 col-md-6">Test col</div>
  <div class="col-xs-12 col-md-6">Test col</div>
  <div class="col-xs-12 col-md-6">Test col</div>
  <div class="col-xs-12 col-md-6">Test col</div>
</div>

我并不完全了解您的最终目标是什么，但上面的代码与您想要的类似。在小屏幕上col-xs-12 将填满整行，在中到大屏幕上，每行有两个col-md-6。请务必阅读引导文档以了解更多信息。