不同行上的引导轮播指示器答案

【问题标题】：Bootstrap Carousel Indicators on different lines不同行上的引导轮播指示器
【发布时间】：2016-05-16 00:15:01
【问题描述】：

一个小问题，如果我像这样在指标中间插入换行符：

<ol class="carousel-indicators">
    <li data-target="#myCarousel" class="active"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <br />
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
</ol>

1对1的通信在休息时搞砸了！换行符就像一个几乎看不见的指示器？！

【问题讨论】：

这是因为ol 标签可能包含only li 元素。 (source)
但是
不是元素吗？
要作为指示器水平对齐，li 项目可能显示为inline-blocks，因此它们与文本一起流动。当您插入换行符时，之前（可能会将顶行向左移动）和之后（可能会将底行向右移动）有空格。因此他们错位了。只是不要在换行符周围留下空格和换行符，应该没问题。
不，当我说未对齐时，我的意思是显示了错误的图像。
当然是。就像一个普通的 div、img 或 meta。

标签： html css twitter-bootstrap carousel

【解决方案1】：

亚历克斯的意思是：

<ol class="carousel-indicators">
    <li data-target="#myCarousel" class="active"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li><br /><li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
    <li data-target="#myCarousel"></li>
</ol>

不要在换行符之间留空格。此外，您不再需要在换行符中使用 /。那是老派。

【讨论】：

我已经做到了，但是点击第7个缩略图不点亮指示灯，点击第8个点亮第7个指示灯，9点亮8等等？！另外，有点老派也没什么错！
如果你尝试给第 7 个指标一个类，比如“return”，然后在你的 css 中，return:before { content: '\A'; } ?
值得一试。你能做一个 js.fiddle 让我做一些实验吗？