ASP.Net 视图无法在代码块中的元素上设置边距

Question

我已经尽力了。并且搜索 Google 没有找到任何东西。

<div class="col-md-12">
    <div class="card-header text-white" style="background-color:cornflowerblue">
        <div class="col">
            @if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
            {
                <a class="text-white float-right" asp-action="Edit" asp-route-id="@item.Id"><i class="bi bi-pencil-square"></i></a>
            }
        </div>

        <div class="col">
            <p class="card-text">
                <h5 class="card-title">@item.Name</h5>
            </p>
        </div>
        <p class="text-dark">@item.Price.ToString("c")</p>
    </div>
</div>
<div class="col-md-6">

基本上我想要的是 bi-pencil-square 浮动到卡片 header 的右边缘。我试过 Bootstrap float right 和 style="Margin-Right: 0px"。我已经尝试在 a 标签、封闭的 div 甚至 i 标签上设置样式。没有任何效果。

有人有什么建议吗？

Answer 1

我明白了。我认为问题在于我应该将 2 div 放在 row 标签中。

<div class="col-md-12">
    <div class="card-header text-white" style="background-color:cornflowerblue">
        <div class="row">
            <div class="col-md-1 offset-11">
                @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 class="col card-text">                                    
                    <h5 class="card-title">@item.Name</h5>                                    
            </div>
        </div>
        
        <p class="text-dark">@item.Price.ToString("c")</p>
    </div>
</div>

ASP.Net 视图无法在代码块中的元素上设置边距

ASP.Net View Cannot Set Margin on Element in Code Block

html

css

view

asp.net-core

bootstrap-5