复杂的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

您必须在.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>

注意： Bootstrap 4.0版本已删除.col-xs类。检查可用的课程。

这也是片段，

<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>

Answer 2

而不是使用col-sm-4或col-xs-4，您应该使用col-4，这意味着您希望它跨越4列，而不仅仅是SM和MD或MD或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就足够了。类似地，对于其他Divs。