使用引导程序在某些设备上内联显示列表

Question

我想知道是否有办法让列表在手机上内联显示，但只是横向放在平板电脑和台式机上。我是一个相当新的引导程序，并且整个上午都在阅读文档，但是找不到任何相关内容。

通常情况下，我会使用jQuery if (window.innerWidth < 768) { $('#list').addClass('list-inline'); }执行此操作，但如果您load()内容，则无法使用。

Answer 1

您可以使用CSS媒体查询执行此操作：

@media only screen and (max-width : 768px) {
    #myList li {
        display: inline;
    }
}

这比使用jQuery更受欢迎，因为它适用于没有额外代码的动态附加元素，并且它还保持了更好的关注点分离（即，只应使用CSS来修改UI）