Bootstrap 4横向显示属性不起作用？

Question

我有一个导航侧边栏，我希望隐藏文本，只显示 iphone + ipad 纵向和横向的图标，但我无法让 display 属性用于横向，仅用于纵向。

HTML 代码

<li class="sidenav_links">
                <a href="{% url 'evalsys:home' %}"><span class="fas fa-home"></span></a>
                <a class="d-none d-sm-block d-md-none d-lg-inline" href="{% url 'evalsys:home' %}">Opret evaluering</a>
            </li>

媒体查询

/* iPhone 6, 7, 8 portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation: portrait)

/* iPhone 6, 7, 8 landsacpe */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation: landscape)

/* iPad Portrait Media Queries  */
 @media only screen
and (min-device-width: 768px)
and (min-device-height: 1024px)
and (orientation: portrait)

/* iPad Landscape Media Queries */
@media only screen
and (min-device-width: 1024px)
and (min-device-height: 768px)
and (orientation: landscape)

Answer 1

仅显示 iphone + ipad 纵向和横向的图标

        body {
            padding: 0;
            margin: 0;
        }
        .sidenav_links {
            background: #dddddd;
            padding: 20px;
            margin: 0;
            list-style-type: none;
        }
        .fas .fa-home {
            display: none;
        }
        @media (max-width: 1366px) {
            .fas .fa-home {
                display: block;
            }
        }

<li class="sidenav_links">
        <a href="{% url 'evalsys:home' %}"><span class="fas fa-home"></span></a>
        <a class="box" href="{% url 'evalsys:home' %}">Opret evaluering</a>
    </li>