如何使用Bootstrap将一个div划分为13等份？

Great question! Bootstrap’s core grid system is built around a 12-column layout, which makes 13 equal parts a bit tricky since 13 is a prime number and doesn’t divide neatly into 12. But don’t worry—there are two straightforward ways to pull this off without ditching Bootstrap entirely.

Method 1: Custom CSS Grid Classes #

If you want something that integrates seamlessly with Bootstrap’s grid structure (like using rows and columns), you can create custom CSS classes to define 13 equal columns. Here’s how:

First, calculate the width of each column: 100% / 13 ≈ 7.6923%. Then add this CSS to your project:

/* Custom 13-column grid matching Bootstrap's gutter styles */
.row-13 {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-13 {
  flex: 0 0 7.6923%;
  max-width: 7.6923%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Optional: Add responsive variants for different screen sizes */
@media (min-width: 576px) {
  .col-sm-13 {
    flex: 0 0 7.6923%;
    max-width: 7.6923%;
  }
}

@media (min-width: 768px) {
  .col-md-13 {
    flex: 0 0 7.6923%;
    max-width: 7.6923%;
  }
}

Then use it in your HTML just like Bootstrap’s native grid:

<div class="container">
  <div class="row-13">
    <div class="col-13 border p-2">Column 1</div>
    <div class="col-13 border p-2">Column 2</div>
    <!-- Repeat for columns 3 to 13 -->
    <div class="col-13 border p-2">Column 13</div>
  </div>
</div>

This method keeps the familiar Bootstrap grid syntax and gives you full control over gutters and responsiveness.

Method 2: Use Bootstrap’s Flex Utilities (No Custom CSS!) #

If you want a quicker solution without writing extra CSS, leverage Bootstrap’s built-in flex classes. The .flex-fill class makes flex child elements equally share available space—perfect for 13 equal parts.

Here’s the HTML:

<div class="container">
  <div class="d-flex flex-wrap">
    <div class="flex-fill border p-2">Column 1</div>
    <div class="flex-fill border p-2">Column 2</div>
    <!-- Repeat for columns 3 to 13 -->
    <div class="flex-fill border p-2">Column 13</div>
  </div>
</div>

• .d-flex turns the parent into a flex container.
• .flex-wrap ensures columns wrap on smaller screens (remove this if you want them to stay in a single row, even if it overflows).
• .flex-fill on each child div makes them all the same width, no matter how many there are.

Pro Tip #

If your columns have varying content lengths and you want to force equal heights too, add .h-100 to each .flex-fill div (Bootstrap’s height utility) to make them match the tallest column.

内容的提问来源于stack exchange，提问作者Akash More