时间戳

首页 > 解决方案 > 引导网格无法在移动设备上正确呈现

bootstrap-4 - 引导网格无法在移动设备上正确呈现

问题描述

我的网站上有以下引导程序网格。它适用于大屏幕和中屏幕，但在移动/较小的屏幕上我只看到 1 个项目 - 基本上所有的列都堆叠在较小的屏幕上。就像浏览器不尊重列中的“col-xs-6”类一样。

关于如何解决此问题的任何想法？我试图看检查员，但我很迷茫。

如果这有什么不同，我正在使用一个名为 Darkly 的 Bootswatch v5.1.1 模板。

 <div class="container-fluid">
  <h1>new and trending</h1>
  <div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
  </div>
</div>

标签： bootstrap-4

解决方案

根据引导文档。XS 表示超小型设备。要测试 xs 网格，您必须使用 576px 或小于 (<576px) 的设备宽度进行测试。最后你必须只写col而不是col-xs。更改您的代码

将您的代码更改为-

<div class="container-fluid">
  <h1>new and trending</h1>
  <div class="row">
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
  </div>
</div>

您可以访问引导文档

推荐阅读