html - 如何将图标与媒体查询并排放置

Question

当导航栏类型效果中的屏幕宽度低于 544 像素时，我希望使用媒体查询并排放置我的 FA 图标。

我已经生成了媒体查询，如下所示:

/* Media Query for Sidebar */
/* For larger screens */
@media (min-width: 545px) {
span.icon {
    display: inline-block;
}

span.text {
    display: inline-block;
}

.sidebar {
    position: static;
}
}

/* Smaller screens */
@media (max-width: 544px) {
span.icon {
    display: inline-block;
    float: right;
}

span.text {
    display: none;
}

.sidebar {
    position: relative;
}

.dashContent {
    margin-top: 20px;
}
}

我得到的当前结果类似于:see here

我的 HTML 标记在这里

<div class="row">
    <div class="col-sm-3 col-xs-12">
        <nav class="nav flex-column sidebar">
            <a class="nav-link active" href="#"><i class="fas fa-chart-bar icon"></i> <span class="text">Dashboard</span></a>
            <a class="nav-link" href="#"><i class="fas fa-cogs icon"></i> <span class="text">My Profile</span></a>
            <a class="nav-link" href="#"><i class="fas fa-users icon"></i> <span class="text">Users</span></a>
            <a class="nav-link" href="#"><i class="fas fa-graduation-cap"></i> <span class="text">Subjects</span></a>
            <a class="nav-link" href="#"><i class="far fa-calendar-alt"></i> <span class="text">Bookings</span></a>
            <a class="nav-link" href="#"><i class="fas fa-list-ul"></i> <span class="text">Reviews</span></a>
            <a class="nav-link" href="#"><i class="fas fa-comments"></i> <span class="text">Messages</span></a>
            <a class="nav-link" href="#"><i class="fas fa-question"></i> <span class="text">Support</span></a>
            <a class="nav-link text-danger" href="#"><i class="fas fa-sign-out-alt icon"></i> <span class="text">Logout</span></a>
        </nav>
    </div>

    <div class="col-sm-9 col-xs-12">
        <div class="dashContent">
            <p>Dashboard content should show up here.</p>
        </div>
    </div>
</div>

在使用这些媒体查询对齐它们时，我是否遗漏了什么？

Answer 1

您可能需要将屏幕标签添加到您的媒体查询中，如下所示:

@media screen and (max-width: 544px) {
 ...
}
@media screen and (min-width: 545px) {
 ...
}

这里是一个 JSFiddle 展示了功能的工作: https://jsfiddle.net/8329pjk9/3/