Bootstrap4中div内<a>元素宽高设置无效的技术求助

首先，核心原因很明确：<a>标签默认是行内元素（display: inline），浏览器对行内元素的宽高设置会直接忽略——这就是你哪怕加了!important也看不到效果的根本问题。

具体解决方案 #

针对你的Bootstrap导航栏布局，只需要调整两个关键点：

1. 修改<a>的显示类型
   把<a>改成块级元素或者弹性容器，让它能接受宽高属性。修改你的CSS中.hm-20 div a的样式：

   .hm-20 div a {
     width: 100%;
     height: 100%!important;
     display: flex; /* 用flex既可以让a成为块级元素，还能方便居中内部图片 */
     align-items: center;
     justify-content: center;
   }
   

   如果你不想用flex，也可以用display: block，但flex更适合你需要图片居中的场景。

2. 确保父元素高度传递正常
   你的父元素层级（.hm-20 → ._n → ._nvs）的高度设置是通的，但要注意Bootstrap的默认样式可能会影响，比如检查.nav__item有没有默认的padding/margin导致高度被挤压。可以给.nav__item加个样式排除干扰：

   .nav__item {
     padding: 0;
     margin: 0;
   }
   

验证效果 #

修改后打开开发者工具，查看<a>元素的Computed样式，此时宽高应该会显示为100%（继承自父容器），实际页面上<a>也会填满父级的容器区域，点击范围也会符合预期。

内容的提问来源于stack exchange，提问作者watcher