How to have more than 6 row-cols?-CodePudding

I am trying to have 9 columns per row using row-cols-*, but it doesn't work with more than 6:

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

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

How can I use more than 6? I need 9 in my case. I thought I could have up to 12.

CodePudding user response：

The row-cols-* class that you are using is not designed to support more than 6 columns per row. This class is part of the Bootstrap grid system, which is a responsive layout system that uses a 12-column grid to create layouts that adapt to different screen sizes.

The row-cols-* class is used to specify the number of columns that should be used for each item in the row, and it is designed to be used with values between 1 and 6. For example, if you specify row-cols-4, each item in the row will be displayed in a 4-column grid, and the items will be automatically distributed across the row.

If you want to use more than 6 columns per row, you can use the col-* class to specify the number of columns that each item should occupy. This class is part of the Bootstrap grid system and can be used to create custom grid layouts. For example, if you want to create a 9-column layout, you could use the col-3 class for each item in the row, which will cause each item to occupy 3 columns in the grid.

CodePudding user response：

Yes, you are correct. If you are adding items dynamically, you will need to keep track of the current number of columns and the screen size, and adjust the classes on your elements accordingly.

Here is an example of how you could do this:

// 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  ;
}

This code defines an object that specifies the number of columns per screen size (numColumns), and a variable that keeps track of the current number of columns (currentColumns). The addItem function creates a new div element and sets the appropriate classes based on the current