Bootstrap 3轮播带数字指示器制作及访问后数字变红问题求助

Hey there! I've got you covered on getting those carousel indicator numbers styled exactly like your reference images—including the red text when active. Let's break this down step by step:

1. Update Your Carousel Indicator HTML #

First, adjust your indicator list to include a custom class (so we don't mess with all Bootstrap carousels) and add the numbers directly inside each <li>:

<ol class="carousel-indicators custom-number-indicators">
  <li data-target="#yourCarouselId" data-slide-to="0" class="active">1</li>
  <li data-target="#yourCarouselId" data-slide-to="1">2</li>
  <li data-target="#yourCarouselId" data-slide-to="2">3</li>
  <!-- Add more indicators as needed -->
</ol>

2. Add Custom CSS to Style the Indicators #

The key here is overriding Bootstrap's default indicator styles, and explicitly setting the active state to keep the black background while turning the text red. Add this to your stylesheet:

/* Base style for custom number indicators */
.custom-number-indicators li {
  width: 32px;
  height: 32px;
  border: none; /* Remove Bootstrap's default border */
  border-radius: 0; /* Square shape instead of rounded */
  background-color: #000; /* Black background */
  color: #fff; /* White default text */
  font-size: 16px;
  text-align: center;
  line-height: 32px; /* Vertically center the number */
  margin: 0 6px; /* Space between indicators */
  cursor: pointer;
}

/* Active state: keep black background, turn text red */
.custom-number-indicators li.active {
  background-color: #000; /* Override Bootstrap's default active background */
  color: #ff2b2b; /* Bright red text for active state */
}

3. Troubleshooting Tips #

If the active state isn't applying correctly:

• Check selector priority: Bootstrap's default .carousel-indicators li.active might have higher specificity. Try adding your carousel's ID to the selector to boost priority:

  #yourCarouselId .custom-number-indicators li.active {
    background-color: #000;
    color: #ff2b2b;
  }
  

• Ensure your CSS loads after Bootstrap: Make sure your custom stylesheet is included after the Bootstrap CSS file in your HTML head—this ensures your styles override the default ones.

That should give you exactly the look you're going for: black square indicators with white numbers, switching to red numbers when active.

内容的提问来源于stack exchange，提问作者Mohamed Alwash