Razor 页面和 Bootstrap，链接之间没有 space

Question

我不知道为什么在添加 if 语句后我的操作链接之间的 margin/space 消失了。我很确定 HTML 在有或没有 @if (User.IsInRole("Admin")) 的情况下看起来都一样（从管理员的角度来看）。我正在使用 bootstrap 4.1.

<section id="sec5">
  <div class="container pt-5">
    <div class="table-responsive-sm mb-3">
      <table class="table">
        <tr>
          <th>Name</th>
          <th class="text-right">Action</th>
        </tr>
        @foreach (var u in Model)
        {
          <tr>
            <td>@u.Name</td>
            <td class="text-right">
              @if (User.IsInRole("Admin"))
              {
                @Html.ActionLink("Edit", "Edit", new { id = u.SpecialityId }, new { @class = "btn btn-secondary" })
                @Html.ActionLink("Delete", "Delete", new { id = u.SpecialityId }, new { @class = "btn btn-danger" })
              }
            </td>
          </tr>
        }
      </table>
    </div>
  </div>
</section>

E:

https://jsfiddle.net/xoduf1sp/5/

Answer 1

在您的示例中，第二个 link 紧跟在第一个 link 之后。如果我在 html 中添加它们之间的换行符，则会出现通常的内联元素间隙。

也许您的 if 子句以某种方式在两个 link 之间分隔了 whitespace/linebreak 个字符？

是：

<a class="btn btn-secondary" href="#">Edit</a><a class="btn btn-danger" href="#">Delete</a>

应该是：

<a class="btn btn-secondary" href="#">Edit</a>
<a class="btn btn-danger" href="#">Delete</a>

参见http://jsfiddle.net/xoduf1sp/7。

Razor 页面和 Bootstrap，链接之间没有 space

Razor Page and Bootstrap, no space between links

html

bootstrap-4

razor-pages