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

Question

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

这是问题，我的按钮被挤压在一起。

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

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

我尝试了什么

1. 检查元素的不同CSS样式。我已经检查了我的实时网站和我的调试网站，它们完全一样。但如果它们看起来不同，那又怎么可能呢？
2. 由于我在Visual Studio中通常处于调试模式，而我的实时站点是Release版本，因此我尝试在Visual Studio中运行Release模式。它仍然看起来正确运行它。
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;
}