css - Bootstrap : numbers from ordered list disapear when using media object

标签 css html twitter-bootstrap

我正在使用 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>

最佳答案

据我所知,bootstrap 的响应式 CSS 对平板电脑 View 中的列表没有任何作用,因此您可能在某处使用了另一个 css 规则,该规则隐藏了平板电脑视口(viewport)的 list-style

另一种猜测是 list-style 设置为外部并且存在 overflow 或使您的 list-style 不可见的东西.将此行添加到您的 CSS 文件(在加载框架和其他东西之后),看看它是否为您解决了问题。

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

关于css - Bootstrap : numbers from ordered list disapear when using media object,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16653364/

相关文章:

javascript - jQuery 循环遍历相同的类名

javascript - 如何在 LI 导航菜单中使用 javascript 添加事件类

css - 试图修复同一页面在 IE8 中略有不同的呈现

javascript - 单击按钮更改变量值

javascript - 无法使用 Bootstrap 模式执行验证

jQuery .removeClass 问题

javascript - HTML5 Canvas 圆具有三种不同的颜色

html - 如何设置从它的位置到页面底部的div高度,如果超过则添加滚动条?

html - 两个导航栏在不同的行中。希望第二行停靠在顶部

javascript - Bootstrap 工具提示/弹出窗口关闭导致 HTML 元素被隐藏