在CSS中使用媒体查询@media根据不同屏幕尺寸设置导航栏品牌Logo的内边距。例如:
@media (max-width: 768px) { .navbar-brand { padding: 0 10px; /* 调整内边距 */ } }
@media (min-width: 768px) and (max-width: 992px) { .navbar-brand { padding: 0 20px; } }
@media (min-width: 992px) and (max-width: 1200px) { .navbar-brand { padding: 0 30px; } }
@media (min-width: 1200px) { .navbar-brand { padding: 0 40px; } }
其中max-width和min-width分别代表屏幕宽度以及设置内边距的阈值。根据不同阈值,设置不同的内边距值达到适应不同屏幕宽度的效果。
上一篇:不同屏幕大小上的文本更改
下一篇:不同屏幕大小下的显示问题