Bootstrap 按钮 margin/padding 在 dotnet 发布后不同

Question

我正在使用 webpack 捆绑器开发 Angular 5，ASP.NET Core 2.0，Bootstrap 项目。我无法弄清楚为什么运行在 Visual Studio 中设置我的网站与运行在 dotnet publish.[=21= 中设置我的网站之间的某些按钮位置不同]

问题出在这里，我的按钮被压在一起了。

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

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

我试过的

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

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

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>

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

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

所以，我现在只需将 .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;
}

Bootstrap 按钮 margin/padding 在 dotnet 发布后不同

Bootstrap button margin/padding different after dotnet publish

twitter-bootstrap

webpack

asp.net-core-2.0

angular

angular5