Bootstrap 4/5 不同的导航栏品牌 css 当导航栏为移动尺寸时

Question

我正在使用 bootstrap 5，并且有一个导航栏，当处于移动尺寸时，它会显示导航栏切换器图标。我的问题是，当徽标处于移动尺寸时，我需要更改徽标位置的 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;
}

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

我该怎么做？

Answer 1

如果您想在 xs 断点之后使用 CSS，请使用带有 bootstrap 断点的 media-queries。 Here is the doc.

通过Sass

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

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

如果您不想使用 Sass，请使用 min-width: 576px 创建一个媒体查询。实际上576px对应xs断点.

通过CSS

@media (min-width: 576px) {
    .navbar .navbar-brand img {
        position: relative;
        top: -26px;
        width: 46px;
        height: 52px;
    }
}

Bootstrap 4/5 不同的导航栏品牌 css 当导航栏为移动尺寸时

Bootstrap 4/5 Different navbar-brand css when navbar is in mobile size

twitter-bootstrap

bootstrap-5

通过Sass

通过CSS