Question

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

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

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

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

1 个答案: