How to get BS Carousel Indicators on different lines

问题

Say I wanted to have 5 on one line and 5 on the other? Using:

<br>

messes up the indication order so that after it, the wrong indicator is lit up?

But how else can you tell the last 5 to go to a new line without <br>?

回答1:

I finally figured it out, just manually applied this. (Key is top 20% and top top 27%.) (I set my indicator on top of my carousel).

  <ol class="carousel-indicators" style="top:20%;height:10px;">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>                                             
   </ol>
   <ol class="carousel-indicators" style="top:27%; height:10px;">
      <li data-target="#myCarousel" data-slide-to="5"></li>
      <li data-target="#myCarousel" data-slide-to="6"></li>
      <li data-target="#myCarousel" data-slide-to="7"></li>
      <li data-target="#myCarousel" data-slide-to="8"></li>
      <li data-target="#myCarousel" data-slide-to="9"></li> 
   </ol>

// This is other things, you can skip reading.

I set height because under my carousel has submit button and indicator default height is so long that margin hinder the clickable area.

1 Default indicator height: clickable area in red box.

2 After set height.

ps. sorry for my horrible gramma.

来源：https://stackoverflow.com/questions/34724960/how-to-get-bs-carousel-indicators-on-different-lines

标签

javascript