怎么有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

您所使用的行-cols-*类设计为每一行不支持6列以上。该类是引导网格系统的一部分，它是一个响应式布局系统，它使用12列网格创建适合不同屏幕大小的布局。

行-cols-*类用于指定应为行中的每一项使用的列数，它的设计用于值介于1和6之间。例如，如果指定行-cols-4，行中的每个项将显示在4列网格中，并且项目将自动分布在该行中。

如果希望每一行使用6列以上，则可以使用col*类来指定每个项应该占用的列数。该类是引导网格系统的一部分，可用于创建自定义网格布局。例如，如果您想要创建一个9列布局，您可以对行中的每个项使用col-3类，这将导致每个项占据网格中的3列。

Answer 2

是的，你是对的。如果要动态添加项，则需要跟踪当前列数和屏幕大小，并相应地调整元素上的类。

下面是一个如何做到这一点的例子：

// Define the number of columns per screen size
const numColumns = {
  xs: 3,
  sm: 6,
  md: 9,
  lg: 12,
};

// Keep track of the current number of columns
let currentColumns = 0;

// Add an item to the grid
function addItem() {
  // Create a new "item" element
  const item = document.createElement("div");
  item.classList.add("item");

  // Set the appropriate column classes based on the current number of columns
  // and the screen size
  if (currentColumns === 0) {
    item.classList.add("col-xs-12");
    item.classList.add("col-sm-6");
    item.classList.add("col-md-4");
    item.classList.add("col-lg-3");
  } else if (currentColumns < numColumns.sm) {
    item.classList.add("col-sm-6");
    item.classList.add("col-md-4");
    item.classList.add("col-lg-3");
  } else if (currentColumns < numColumns.md) {
    item.classList.add("col-md-4");
    item.classList.add("col-lg-3");
  } else {
    item.classList.add("col-lg-3");
  }

  // Add the item to the grid
  const grid = document.getElementById("grid");
  grid.appendChild(item);

  // Increment the current number of columns
  currentColumns++;
}

此代码定义了一个对象，该对象指定每个屏幕大小的列数(numColumns)，以及一个跟踪当前列数(currentColumns)的变量。addItem函数创建一个新的div元素，并根据当前