Css 适用于平板电脑、台式机和手机的响应性专栏。独自创立

我一直在看“；但我还没有让它发挥作用

你能给我更详细的说明吗

我正在使用Bootstrap3.0

我会非常感激的！我已经花了很多天的时间试图去做，但没有成功

这是我的代码：

<div class="row">
  <div class="col-xs-6 col-sm-3"> //content  </div>
  <div class="col-xs-6 col-sm-3"> //content  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3"> //content  </div>
  <div class="col-xs-6 col-sm-3"> //content  </div>
</div>

//内容
//内容
//内容
//内容

对不起我的英语；我使用谷歌翻译。

<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12>
      //you content
   </div>
</div>

首先，你应该看看这篇文章

基本上，代码应该可以工作，如果我没有弄错的话：

这个网格系统的全部要点是根据屏幕大小指定列的宽度

默认情况下，引导得到12列。如果您这样指定：

col-md-3
这意味着“在介质（低于992px和高于768px）中，列的宽度应为3/12，因此它意味着将有4列

col-lg-6
这意味着“在较大的范围内（大于992px，小于1200px），列的宽度应为6/12，因此它意味着将有2列

依此类推，看看你说的参考资料：

“col-md-3这意味着”在介质中（低于992px和高于768px），列的宽度应为宽度的3/12，因此它意味着将有4列

col-lg-6这意味着在大型（大于992px，小于1200px）中，列的宽度应为6/12，因此这意味着将有2列。”

我认为你犯了一个错误。根据w3：

中等设备定义为屏幕宽度为

992像素到1199像素

及
大型设备定义为屏幕宽度为

1200像素及以上

.
您能告诉我您想要多少列用于平板电脑、台式电脑和电话吗？您能告诉我们到目前为止您尝试了什么吗？对不起，我忘记写了！我想要4列用于台式电脑，2列用于平板电脑，1列用于电话。感谢您的回答，我尝试编辑引导的CSS，如我提到的URL所示。（我试图编辑引导的CSS，如我提到的URL所示。）“感谢您的解决方案！我有以下代码：//content//content//content//content，但在手机中显示2列，而不是1列……使用
您应该学习引导网格系统@MartaFernandez@MartaFernandez：：如果这个答案对你有帮助，请接受它。你好@MartaFernandez如果是，请接受我的答案帮助你谢谢。这对我有很大帮助。你是对的（尽管你不应该引用w3schools）。这是邪恶的。引用原始文档是。除此之外，这不是答案，而是评论。