ブートストラップボタンの概要が正しく動作しない

Question

ブートストラップにはかなり新しく、ボタンのスタイルを正しく設定するのに少し問題があります。私は緑色の（成功した）色のボタンを、ウェブサイトhereに記載されているような輪郭だけで欲しい。 <button type="button" class="btn btn-success-outline">Success</button>というコードを使用すると、わかりやすいスタイリングがないグレーのボタンが表示されますwhich looks like this ...誰か助けてくれますか？ ありがとう！

Answer 1

ブートストラップのCSSファイルが正常に機能していますか？そのコード<button type="button" class="btn btn-success-outline">Success</button>では、btn-success-outline（あなたが言ったこと）以外は何も指定していないからです。 cssファイルが動作するかどうか、または他のブートストラップ・ドキュメントがあるかどうかを確認する必要があります。それは私のために働く

Answer 2

あなたのブートストラップがうまく動作する場合。あなたはこのコードを試すことができます。

<button type="button" class="btn btn-success-outline">Success</button> 

plzあなたの親Divをチェックしてください。このdivはFloat CSSを使用していますか？ btnよりfloatを使用する場合は、clearが必要です。

Answer 3

私も同様の問題が発生しています。 CSSでルールを設定して、「btn-success-outline」クラスをオーバーライドするだけでよいのです。

/*Bootstrap button outline override*/ 
.btn-outline { 
    background-color: transparent; 
    color: inherit; 
    transition: all .5s; 
} 

.btn-primary.btn-outline { 
    color: #428bca; 
} 

.btn-success.btn-outline { 
    color: #5cb85c; 
} 

.btn-info.btn-outline { 
    color: #5bc0de; 
} 

.btn-warning.btn-outline { 
    color: #f0ad4e; 
} 

.btn-danger.btn-outline { 
    color: #d9534f; 
} 

.btn-primary.btn-outline:hover, 
.btn-success.btn-outline:hover, 
.btn-info.btn-outline:hover, 
.btn-warning.btn-outline:hover, 
.btn-danger.btn-outline:hover { 
    color: #fff; 
} 

あなたのhtml、使用中の上記のCSSを使用した最初のオプションを選択した場合：

<button type="button" class="btn btn-success btn-outline">success</button> 

Answer 4

FYI今BTN-outline-する*

https://github.com/twbs/bootstrap/issues/17719

Answer 5

と改名されていますあなたの仕事がうまくいかない理由は、それがbtn-outline-successではなくbtn-success-outlineであるということです。