CSS如何设置Bootstrap按钮内部span占满全宽 设置width:100%无效

你设置的width: 100%不生效是因为<span>是默认的行内（inline）元素，CSS规范中宽高属性对行内元素不生效，仅对块级、行内块级以及弹性/网格子元素生效。

按优先级从高到低选择即可：

• 首选方案：将(click)="showI('test_data)"事件直接绑定到外层<button class="dropdown-item">元素上，无需修改任何样式即可实现全按钮区域点击触发。这是最符合交互逻辑的解法，按钮本身就是交互触发容器，事件绑定在父元素上更合理。
• 若因业务逻辑必须将事件绑定在<span>上，给<span>添加display: block属性即可让宽高设置生效，也可以直接使用Bootstrap内置的d-block w-100工具类，无需写自定义CSS。
• 如果按钮自带默认内边距导致width: 100%的span仍无法覆盖按钮的padding区域，可以给span添加负边距抵消父元素的内边距，示例自定义CSS如下：

.dropdown-item .text-capitalize {
  display: block;
  width: 100%;
  /* 适配Bootstrap dropdown-item默认的左右1rem内边距 */
  margin: 0 -1rem;
  padding: 0 1rem;
}

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