为什么我在引导程序中的断点不是好的网格无法正常工作

Question

我不知道为什么我在引导程序4中要求在991（lg和更低）时，我的断点是800 px，这是我的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-2 col-lg-6 fondNoir" id="menuTexte"> img</div>
        <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> Jeux</div>
        <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> Livres</div>
        <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> E-sport</div>
        <div class="col-xl-2 offset-xl-0 col-lg-2 col-md-2 col-sm-2 offset-sm-7 fondNoir" id="menuTexte"> Communauté</div>
        <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> Boutique</div>


    </div>

</div>

Answer 1

您所有的断点都不在800px。如果仔细观察，它们就像您指定的一样工作。您需要了解网格系统如何在引导程序中工作。

引导网格系统

Grid断点基于最小宽度的媒体查询，这意味着它们适用于该一个断点及其上方的所有断点（例如，.col-sm-4适用于小型，中型，大型和超大型设备，但不适用于第一个xs断点）。

如果没有为特定的屏幕尺寸指定任何内容，则默认为12格大小（如果未指定任何内容，则可以认为默认值为col-xs-12）

---

程序的工作

1. XL屏幕：

   当您的代码段在超大屏幕或xl（> 1200px）上运行时，每个div占用2个网格值的空间（col-xl-2将适用于所有网格）。

2. LG屏幕：

   从大屏幕过渡到lg（992px-1200px）时，您已降至1200px以下，现在将应用col-lg。因此网格将被划分为

   • 部门-

     ] >>

   • 1st div-6格（col-lg-6）。

   • 第2到第4格-在第一行（col-lg-6）中各有2个网格。现在使用第一行的所有12个网格。
   • 第五和第六个div-第二行各2个网格（col-lg-6。

3. MD屏幕：

   当您低于992px时，输入中等屏幕范围（768px-992px），div将按照col-md放置，或者如果未指定低于lg的范围，则默认为col-xs-12。因此网格将被划分为

   • 部门-

     ] >>

   • 1格至4格-12格（默认为col-xs-12，因为未指定任何内容）

   • 5格-2格偏移7（col-md-2和offset-sm-7）
   • 6格-12格（由于未指定任何内容，默认为col-xs-12）

4. SM屏幕：

当您低于768像素时，将为div分配网格，就像MD屏幕

一样，因为没有为sm屏幕指定任何内容。

5. XS屏幕：

当您低于576像素时，除第5个div之外，所有div都将保持不变，在这种情况下offset-sm-7将不再适用，并且所有网格将与左侧对齐，每个网格占据12个网格。

---

希望您了解您的程序是如何工作的，并且不会出现异常或意外情况。如果您还有任何疑问，请在评论中提问。