引导：使用媒体对象时，有序列表中的数字会消失 [英] Bootstrap: numbers from ordered list disapear when using media object

问题描述

我使用bootstrap来创建网站。我试图创建一个有序列表，包括每个项目的媒体对象。当我这样做，数字在平板电脑上观看时消失。但是，当您从桌面浏览器中查看列表时，窗口已调整为平板电脑分辨率，因此有数字。在平板电脑上观看时，如何获得数字不会消失？

I'm using bootstrap to create a website. I'm trying to create an ordered list that consists of media objects for each item. When I do this, the numbers disappear when viewing on a tablet. However the numbers are there when you view the list from a desktop-browser with the window adjusted to a tablet resolution. How can I get the numbers to NOT disappear when viewing on a tablet?

<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>

推荐答案

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

As I'm aware of bootstrap's responsive CSS, it doesn't do anything to lists in tablet view so you may be using another css rule somewhere which is hiding list-style for tablet viewport.

另一个猜测是 list-style 设置为外部，并且有一个溢出或使您的 list-style 不可见的东西。将此行添加到您的CSS文件（加载框架和其他东西后），并看看是否为您解决了问题。

Another guess would be that the list-style is set to outside and there's an overflow or something that makes your list-style invisible. Add this line to your CSS file (after loading frameworks and other things) and see if it fixes the problem for you.

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

这篇关于引导：使用媒体对象时，有序列表中的数字会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！