如何拥有超过 6 个行列？

Question

我正在尝试使用 row-cols-* 使每行有 9 列，但它不适用于超过 6 列：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row row-cols-lg-9 row-cols-md-9 row-cols-sm-9 row-cols-9 text-center">
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
    <div>Item4</div>
    <div>Item5</div>
    <div>Item6</div>
    <div>Item7</div>
    <div>Item8</div>
    <div>Item9</div>
    <div>Item10</div>
    <div>Item11</div>
    <div>Item12</div>
    <div>Item13</div>
    <div>Item14</div>
    <div>Item15</div>
</div>

我怎样才能使用超过 6 个？我需要 9 个。我以为我最多可以有12个。

Answer 1

您使用的 row-cols-* 类并非旨在支持每行超过 6 列。这个类是 Bootstrap 网格系统的一部分，这是一个响应式布局系统，它使用 12 列网格来创建适应不同屏幕尺寸的布局。

row-cols-* 类用于指定行中每个项目应使用的列数，它被设计为与 1 到 6 之间的值一起使用。例如，如果您指定 row-cols- 4，行中的每个项目将显示在一个 4 列的网格中，项目将自动分布在整个行中。

如果你想每行使用超过 6 列，你可以使用 col-* 类来指定每个项目应该占据的列数。此类是 Bootstrap 网格系统的一部分，可用于创建自定义网格布局。例如，如果你想创建一个 9 列的布局，你可以为行中的每个项目使用 col-3 类，这将导致每个项目在网格中占据 3 列。