Question

我一直在看＆＃34; 4 columns to 2 columns with Twitter Bootstrap＆＃34 ;;但我还没有把它付诸实践......

请问您能给我更详细的说明吗？

我使用bootstrap 3.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>

抱歉我的英文;我使用谷歌翻译。

Answer 1

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

Answer 2

首先，您应该看一下this文章

基本上，如果我说得对， this 代码应该有效：

此网格系统的重点是指定列应采用的宽度，具体取决于屏幕大小。

默认情况下，Bootstrap有12列。如果你这样指定：

col-md-3这意味着＆＃34;在介质中（低于992px且高于768px），列应占据宽度的3/12，因此这意味着将有4列。

col-lg-6这意味着＆＃34;在大（992px以上且1200px以下）中，列应占据宽度的6/12，因此这意味着将有2列。

等等，请查看 Bootstrap docs 参考

Answer 3

你说：

＆＃34; col-md-3这意味着＆＃34;在介质中（低于992px和高于768px），该列应占据宽度的3/12，因此这意味着将有4列

col-lg-6这意味着在大（992px以上且1200px以下）中，列应占宽度的6/12，因此意味着将有2列。＆＃34;

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

中型设备定义为具有

的屏幕宽度

992像素到1199像素

和大型设备被定义为具有

的屏幕宽度

1200像素及以上

平板电脑，台式机和手机的响应列。引导

3 个答案: