0

我正在使用 bootstrap 5 并且有一个导航栏，它在移动大小时显示 navbar-toggler-icon。我的问题是，当徽标为移动尺寸时，我需要更改徽标位置的 css。

所以：

<a class="navbar-brand" href="#"><img src="logo.png" alt="logo"></a>

以上在移动尺寸时会有不同的css。

这是导航代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="./images/logo.png" alt="logo"></a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100">
            <li class="nav-item flex-fill">
              <a
                class="nav-link active"
                aria-current="page"
                href="#"
                >Column 1</a
              >
            </li>
            
          </ul>
        </div>
      </div>
    </nav>

我有这个CSS：

.navbar .navbar-brand img {
  position: relative;
  top: -26px;
  width: 46px;
  height: 52px;
}

我只想在尺寸不移动时使用

我怎样才能做到这一点？

4

1 回答 1

1

如果要在xs断点后使用 CSS，请使用media-queries引导断点。这是文档。

通过萨斯

@include media-breakpoint-up(sm) { 
    .navbar .navbar-brand img {
        position: relative;
        top: -26px;
        width: 46px;
        height: 52px;
    }
}

我建议你通过 Sass 使用 bootstrap，这样你就可以使用它们的函数、mixins 和一些扩展的 css 规则:)

如果您不想使用 Sass，请使用min-width: 576px. 实际上576px对应的是xs断点。

通过 CSS

@media (min-width: 576px) {
    .navbar .navbar-brand img {
        position: relative;
        top: -26px;
        width: 46px;
        height: 52px;
    }
}
于 2020-12-10T10:08:47.737 回答