在HTML中,添加一个class为"navbar-brand"的元素,这个元素代表着logo和品牌名。
在CSS中,使用@media查询和Bootstrap的栅格系统,根据不同屏幕大小对logo的大小进行调整。
代码示例:
HTML:
CSS:
@media (min-width: 768px) {
.navbar-brand img {
width: 100px;
height: 100px;
}
}
@media (max-width: 767.98px) {
.navbar-brand img {
width: 50px;
height: 50px;
}
}