dotnet後のブートストラップボタンのマージン/パディングが異なる

Question

Webpackバンドラを使用したAngular 5、ASP.NET Core 2.0、Bootstrapプロジェクトで作業しています。私は、Visual Studioで自分のサイトを実行してからdotnet publishの後にそれを実行する間に、いくつかのボタン配置が異なる理由を理解しようとしています。

ここに問題があります。私のボタンは一緒に押しつぶされています。

これは、それがどのように見えるべきかです。ボタンの間の間隔を注意してください：私は、Visual Studioで実行すると

ボタンを表現し、スタンドアロンとして、またはIISのいずれかで、正しい見えます。しかし、私のライブウェブサイト（dotnet publish）では、ボタンが押しつぶされています。これは、ボタンが並んで配置されているサイトの他の領域で発生します。今、私は振る舞いを修正するためにスタイリングを追加することができますが、既存の不一致を解消するまでは意味がありません。私は要素ごとに異なるCSSスタイル用

1. チェックを試してみた何

   。ライブサイトとデバッグサイトを確認しましたが、まったく同じです。しかし、もし彼らが違って見えたら、それはどういうことでしょうか？

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; 
}