Bootstrap 4/5 Различный CSS-бренд navbar, когда navbar имеет мобильный размер
Я использую 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;
}
который я хочу использовать только тогда, когда размер НЕ мобильный
Как мне это сделать?
@Devart - проблема в том, что у меня есть этот css: .navbar .navbar-brand img { position: relative; верх: -26px; ширина: 46 пикселей; высота: 52 пикселя; } ... который я хочу использовать только тогда, когда размер НЕ мобильный
Проверьте мой ответ ниже. Используйте media-queries, чтобы использовать этот стиль только из min-width, который вы хотите. Таким образом, он не будет использоваться при такой ширине. PS: добавьте тег css к своему вопросу. И используйте функцию StackOverflow HTML/CSS/JS snippet в редакторе вопросов, чтобы добавить свой код с предварительным просмотром, чтобы мы могли протестировать/запустить его, как JSFiddle.
Ответы 1
Если вы хотите использовать свой CSS после точки останова xs, используйте media-queries с точками останова начальной загрузки. Вот док.
Через Сасс
@include media-breakpoint-up(sm) {
.navbar .navbar-brand img {
position: relative;
top: -26px;
width: 46px;
height: 52px;
}
}
И я предлагаю вам использовать загрузку через Sass, чтобы вы могли использовать их функции, миксины и некоторые расширенные правила css :)
Если вы не хотите использовать Sass, создайте медиа-запрос с помощью min-width: 576px. На самом деле 576px соответствует точке останова xs.
Через CSS
@media (min-width: 576px) {
.navbar .navbar-brand img {
position: relative;
top: -26px;
width: 46px;
height: 52px;
}
}
Попробуйте
container-fluidв качестве обертки для вашего внешнегоnav, а не внутреннего.