dotnet 发布后引导按钮边距/填充不同

Question

我正在开发一个带有 webpack 捆绑器的 Angular 5、ASP.NET Core 2.0、Bootstrap 项目。我很难弄清楚为什么在 Visual Studio 中运行我的网站与在 dotnet publish 之后运行我的网站之间的某些按钮位置不同。

问题来了，我的按钮被挤在一起了。

这就是它应该的样子；注意按钮之间的间距：

当我在 Visual Studio 中运行时，这些按钮看起来是正确的，无论是作为独立的还是在 IIS express 中。但是，在我的实时网站（dotnet publish）上，按钮被压扁了。这发生在并排放置按钮的站点的其他区域。现在，我可以添加样式来纠正这种行为，但在我消除现有差异之前它没有任何意义。

我的尝试

1. 检查元素的不同 CSS 样式。我检查了我的实时站点和调试站点，它们完全一样。但是，如果它们看起来不同，那怎么可能呢？
2. 由于我通常在 Visual Studio 中处于调试模式，并且我的实时站点是发布版本，因此我尝试在 Visual Studio 中运行发布模式。以这种方式运行它看起来仍然正确。
3. 我知道我的实时站点最终使用dotnet publish 来生成我的站点。因此，通过 Powershell，我运行了dotnet publish 和dotnet run，并在localhost 上查看了它。啊哈！我的按钮被压扁了。

然而，我仍然在每个版本之间检查我在 Chrome 中的元素，并且我仍然有使用相同 CSS 的不同按钮位置。我什至不知道为什么正确版本的按钮之间有填充，它们没有边距/填充！不知道还能尝试什么。

HTML 很简单：

<div *ngIf="user?.username">
    <button class="btn btn-sm btn-outline-secondary" (click)="likeClick()">Like</button>
    <button class="btn btn-sm btn-outline-secondary" (click)="comment()">Reply</button>
</div>

我正在使用"bootstrap": "4.0.0-beta.2"

Answer 1

所以，似乎是因为我的 HTML 输入为

<div *ngIf="user?.username">
    <button class="btn btn-sm btn-outline-secondary" (click)="likeClick()">Like</button>
    <button class="btn btn-sm btn-outline-secondary" (click)="comment()">Reply</button>
</div>

按钮之间的换行符在我调试时会创建一个空格字符。这就解释了为什么我在 Chrome 开发工具中看不到任何 CSS 边距或宽度的间隙；我很幸运，不小心用光标选择了空格字符。

我猜测 webpack 的热重载与此有关。如果我删除换行符，空格字符就会消失，如果我对按钮应用边距，它也会消失，我认为这很有趣。

所以，我现在只需将.btn-toolbar 添加到任何代表我希望的工具栏和样式的按钮分组中：

<div class="btn-toolbar" *ngIf="user?.username">
    <button class="btn btn-sm btn-outline-secondary" (click)="likeClick()">Like</button>
    <button class="btn btn-sm btn-outline-secondary" (click)="comment()">Reply</button>
</div>

.

.btn-toolbar > button {
    margin-right: 0.5rem;
}

.btn-toolbar > button:last-child {
    margin-right: 0;
}