桌面 4 列，平板电脑 2 列，移动设备 1 列使用引导程序

【问题标题】：4 columns in desktop, 2 in tablet and 1 in mobile using bootstrap桌面 4 列，平板电脑 2 列，移动设备 1 列使用引导程序
【发布时间】：2014-02-09 10:47:45
【问题描述】：

使用 Bootstrap 非常有趣和有帮助，目前我在创建以下需求时遇到了问题。

“使用 bootstrap 的桌面 4 列，平板电脑 2 列和移动设备 1 列” 谁能告诉我正确的结构

【问题讨论】：

创建一个JSFiddle。
这甚至在他们的文档中作为示例给出！
getbootstrap.com/css/#grid-example-mixed-complete
是的，我已经尝试过了，但它不适用于平板电脑模式，我使用了 getbootstrap.com/examples/carousel 示例，并且我将这 3 个 div 设置为 4 个（具有圆形图像）并制作了它的类col-md-6。目前我有 4 个像这 3 个盒子一样的盒子

标签： css html twitter-bootstrap-3

【解决方案1】：

不确定这是你想要的，但看看这个：-

DEMO

<div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">Col 1</div>
    <div class="col-md-3 col-sm-6 col-xs-12">Col 2</div>
    <div class="clearfix visible-sm"></div>
    <div class="col-md-3 col-sm-6 col-xs-12">Col 3</div>
    <div class="col-md-3 col-sm-6 col-xs-12">Col 4</div>
</div>

--- UPDATED DEMO ---

【讨论】：

嘿，我是否需要在第二个之后添加
，因为第三个和第四个不能正常工作
看到我在每个 div 中都有一个图像和内容，在 2nd div 3rd 之后，第四个没有正确对齐。这就是问题所在。
好的...在哪个设备上没有正确对齐（台式机、平板电脑或移动设备）？
查看更新的演示。
完成了，这是我的结构jsfiddle.net/FbXzM/6。但它在小提琴中工作但不在浏览器上