如何在桌面和移动设备之间保持导航栏中购物车图标的位置？

Question

我使用 Bootstrap 和自定义 CSS 来设计一个导航栏，在桌面和移动设备上将购物车图标保留在导航栏的右侧。无论我如何对元素进行排序，我似乎都无法做到这一点，并且 CSS“order”属性似乎没有什么区别。

这是移动导航栏，具有所需的布局：

这是桌面导航栏，这是错误的：

这是我的 HTML：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light mb-3">
    <div class="container">

        <button id="nav-toggle" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <a id="nav-header" class="navbar-brand" asp-area="" asp-page="/Index">
            <img alt="Home" src="placeholder.webp" />
        </a>

        <a id="nav-cart" class="nav-item nav-link text-light" asp-area="" asp-page="/Cart">
            <img alt="Cart" src="assets/shopping_cart_25x24.webp" />
        </a>

        <div id="nav-menu" class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-light" asp-area="" asp-page="/Shop">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" asp-area="" asp-page="/About">About</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

这是我的自定义 CSS，位于 Bootstrap 之上：

@media (min-width: 576px) {
    nav #nav-cart {
        order: 3;
    }

    nav #nav-menu {
        order: 2;
    }

    .nav-item {
        margin-bottom: -4px;
    }
}

nav {
    background-color: #a8d0b2;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    flex: auto;
    font: lighter 1.5rem 'Buxton Sketch', sans-serif;
}

nav #nav-cart {
    order: 2;
}

nav #nav-cart img {
    max-height: 32px;
}

nav #nav-header {
    order: 1;
}

nav #nav-menu {
    order: 3;
}

nav #nav-toggle {
    order: 0;
}

.navbar-brand {
    font-size: 22px;
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

我是否错误地执行了此操作，或者是否存在某些因素阻止其按预期运行？

Answer 1

一切都很好，除了

@media

规则被后面的代码覆盖，所以在桌面屏幕上的顺序是：

• #nav-header { order: 1; }

• #nav-cart { order: 2; }

• #nav-menu { order: 3; }

为了防止这种情况，应将整个

@media

块放置在末尾：

nav {
  background-color: #a8d0b2;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
  flex: auto;
  font: lighter 1.5rem 'Buxton Sketch', sans-serif;
}

nav #nav-cart {
  order: 2;
}

nav #nav-cart img {
  max-height: 32px;
}

nav #nav-header {
  order: 1;
}

nav #nav-menu {
  order: 3;
}

nav #nav-toggle {
  order: 0;
}

.navbar-brand {
  font-size: 22px;
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

@media (min-width: 576px) {
  nav #nav-cart {
    order: 3;
  }
  nav #nav-menu {
    order: 2;
  }
  .nav-item {
    margin-bottom: -4px;
  }
}

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light mb-3">
  <div class="container">

    <button id="nav-toggle" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

    <a id="nav-header" class="navbar-brand" asp-area="" asp-page="/Index">
      <img alt="Home" src="placeholder.webp" />
    </a>

    <a id="nav-cart" class="nav-item nav-link text-light" asp-area="" asp-page="/Cart">
      <img alt="Cart" src="assets/shopping_cart_25x24.webp" />
    </a>

    <div id="nav-menu" class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
      <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
          <a class="nav-link text-light" asp-area="" asp-page="/Shop">Shop</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light" asp-area="" asp-page="/About">About</a>
        </li>
      </ul>
    </div>

  </div>
</nav>



<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>