Question

我目前遇到bootstrap问题。我想知道是否有一个css或html技巧，当网站在移动设备上时切换它。

目前设置的行对桌面有好处 1,2,1,2,1,2,1,2，

我需要切换到 6,6 6,6 6,6 6,6 当网站宽度为750或更小时有人能指出我正确的方向。

谢谢

Answer 1

.col-xs-类用于超小型设备电话（＆lt; 768px），.col-md-类用于中型设备桌面（≥992px）。您可以使用以下代码根据不同的分辨率调整内容大小。

<div class="row">
  <div class="col-xs-6 col-md-1">...</div>
  <div class="col-xs-6 col-md-2">...</div>

  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-md-1">...</div>
  <div class="col-xs-6 col-md-2">...</div>

  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-md-1">...</div>
  <div class="col-xs-6 col-md-2">...</div>

  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-md-1">...</div>
  <div class="col-xs-6 col-md-2">...</div>
</div>

添加.clearfix和.visible-xs-block类是可选的，如果xs列的内容高度不匹配，则会清除它们。

将引导程序从一行更改为多个四行单独的行

1 个答案: