ASP.NET View代码块内元素无法设置边距，bi-pencil-square无法右对齐求助

问题根因 #

你现在的布局不生效是因为两个核心问题：

1. 你在card-header里直接用了.col类，但没有给外层套.row容器，Bootstrap的栅格系统必须是container/row → col的层级结构，缺失row的情况下col的宽度、布局行为都会异常
2. 单个.col默认是占满100%父宽度的，你给第一列里的a标签加右浮动，只会浮动到当前col的右边缘，不会到整个card-header的右边缘

可行解决方案 #

直接用Bootstrap自带的flex工具类重构card-header的布局，不需要用浮动，兼容性更好，代码更简洁：

<div class="col-md-12">
    <div class="card-header text-white d-flex align-items-start justify-content-between" style="background-color:cornflowerblue">
        <!-- 左侧内容区 -->
        <div>
            <h5 class="card-title">@item.Name</h5>
            <p class="text-dark mb-0">@item.Price.ToString("c")</p>
        </div>
        <!-- 右侧编辑按钮区 -->
        @if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
        {
            <a class="text-white" asp-action="Edit" asp-route-id="@item.Id">
                <i class="bi bi-pencil-square"></i>
            </a>
        }
    </div>
</div>
<div class="col-md-6">

改动说明 #

• 给card-header加了d-flex开启flex布局，justify-content-between自动让左右两个子元素分别贴左右边缘，align-items-start让两个子元素顶部对齐，符合你原来的视觉顺序
• 去掉了冗余的col、p嵌套结构（你原来的代码里h5套在p标签里是不符合HTML规范的，p标签不能嵌套块级元素，也顺便修正了这个问题）
• 不需要额外加float、margin样式就能实现编辑图标贴card-header右边缘的效果

如果确实想保留原来的浮动写法也可以，只要给外层的col套row，同时给第一列加w-100让它占满整行，就可以让float-right生效，不过更推荐上面的flex方案，维护起来更简单。

内容的提问来源于stack exchange，提问作者David.Warwick