Question

我正在使用bootstrap来创建一个网站。我正在尝试创建一个由每个项目的媒体对象组成的有序列表。当我这样做时，在平板电脑上观看时数字会消失。但是，当您从桌面浏览器查看列表并将窗口调整为平板电脑分辨率时，数字就会出现。在平板电脑上观看时如何才能使数字不消失？

<ol>                        
    <li>
        <div class="media">
            <a class="pull-right" href="#">
                <div class="span4"><img class="media-object" data-src="holder.js/64x64"></div>
            </a>
            <div class="media-body">
                <!-- Nested media object -->
                <div class="media">
                    blablabla
                </div>
            </div>
        </div>
    </li>

Answer 1

由于我了解bootstrap的响应式CSS，因此它不会对平板电脑视图中的列表执行任何操作，因此您可能正在使用另一个隐藏list-style平板视口的css规则。

另一个猜测是，list-style设置为外部，并且overflow或某些内容会使list-style不可见。将此行添加到CSS文件中（在加载框架和其他内容之后），看看它是否为您解决了问题。

@media (min-width: 768px) and (max-width: 979px) {
    ol { list-style: decimal inside; }
}

Bootstrap：使用媒体对象时，有序列表中的数字消失

1 个答案: