移动设备上的复杂 Bootstrap 堆叠列

Question

我有这个来自桌面的专栏

|      col-lg-5       | col-lg-2 | | col-lg-2 | | col-lg-2 |

如何在手机上制作

|            col-sm-12           |
| col-sm-4 | col-sm-4 | col-sm-4 |

我试试这个

<div class="col-sm-12 col-md-12 col-lg-5">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>

但在移动设备上显示

|   col-12   |
|   col-12   |
|   col-12   |
|   col-12   |

Answer 1

而不是使用 col-sm-4 或 col-xs-4，您应该使用 col-4，这意味着您希望它跨越 4 列，而不仅仅是 sm 和 md 或 xs 和 md 之间的视口，但对于直到 md 的所有视口。这样做吧。

<div class="row">
    <div class="col-12 col-lg-5">
        xxx
    </div>
    <div class="col-4 col-md-2 col-lg-2">
       xxx
    </div>
    <div class="col-4 col-md-2 col-lg-2">
       xxx
    </div>
    <div class="col-4 col-md-2 col-lg-2">
       xxx
    </div>
</div>

不必写col-sm-12 col-md-12 col-lg-5，写col-sm-12 col-lg-5即可。其他 div 也类似。

Answer 2

您必须在 .row 中定义 bootstrap 网格系统，然后页面上就会有网格。

在您的代码中试试这个，

<div class="row">
  <div class="col-12 col-sm-12 col-md-5">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
</div>

Note: Bootstrap 4.0 version has removed .col-xs class. Check available classes.

这里也是片段，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-12 col-sm-12 col-md-5">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
</div>

移动设备上的复杂 Bootstrap 堆叠列

Complex Bootstrap stacked columns on mobile

twitter-bootstrap

stacked