Bootstrap 4 марки navbar - возможно ли использовать другой логотип с меньшей точкой останова?

Question

У меня есть следующий логотип заголовка, который хорошо выглядит при средних и больших размерах, но не подходит для небольших экранов:

Я не могуиспользуйте адаптивное изображение, потому что, если я правильно читаю документацию , Bootstrap просто уменьшает ширину, оставляя высоту неизменной.Боюсь, что текст будет просто нечитаемым, поскольку ширина изображения все больше и больше ограничивается.

В идеале я бы заменил этот логотип на меньший в средней точке разрыва.Это возможно?

Answer 1

Возможно, не самый элегантный, но быстрый и простой: имейте два изображения бренда, скрывайте и отображайте их соответствующим образом, используя классы отображения служебной программы Bootstrap.

https://getbootstrap.com/docs/4.1/utilities/display/

Ex что-то вродевы используете .navbar-brand, но одна и та же техника работает независимо от этого:

<a class="navbar-brand" href="#">
    <img src="logo-small.jpg" alt="Logo small" class="d-lg-none">
    <img src="logo-large.jpg" alt="Logo large" class="d-none d-lg-block">
</a>

Это позволит показать маленький логотип в размерах xs, sm & md и большой логотип в lg & xl.