web-dev-qa-db-ja.com

Bootstrap=ボタンのアウトラインが機能しない

私はBootstrapの初心者で、ボタンのスタイルを正しく設定するのに少し苦労しています。緑色の（成功）色のボタンが必要です。ウェブサイトに記載されているアウトラインだけが表示されます here 。提案されたコードを使用すると<button type="button" class="btn btn-success-outline">Success</button>、スタイリングがはっきりしない灰色のボタンが表示されます これは次のようになります ...誰か助けてくれますか？ありがとう！

htmlhtml5twitter-bootstraptwitter-bootstrap-3
12
Snazzy Sauce

私は同様の問題を抱えています。 CSSでルールを設定して、OR '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;
}

上記のCSSで最初のオプションを選択した場合、htmlで次を使用します。

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

bootstrap cssファイルは動作しますか？そのコードでは<button type="button" class="btn btn-success-outline">Success</button> btn-success-outline（あなたが言ったこと）以外は何も指定しません。あなたのcssファイルが動作するか、他のbootstrapドキュメント。

1
Haydar Öztürk

参考までに、btn-outline- *に名前が変更されました

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

1
kayex

If Your Bootstrap=正常に動作します。このコードを試すことができます。

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

plzは、親divを確認します。このdivはFloat cssを使用していますか。 btnよりfloatを使用する場合、clear：bothが必要です。

0
Mamun

が動作しないのは、btn-success-outlineではなくbtn-outline-successであるためです。

0
daddycardona

Chromeボタンとアウトラインの互換性の問題：コード内<button type="button" class="btn btn-success-outline">Success</button> with bootstrap> 4.1.x type="button"はChromeのアウトライン効果を壊しますが、Firefoxでは機能します。

0
Alex