Настроек кнопки Bootstrap не работает

Question

Я довольно новичок в Bootstrap, и у меня проблемы с правильной настройкой кнопок. Я хочу зеленую (успешную) цветную кнопку с просто контуром, как описано на их сайте here. Когда я использую предложенный код <button type="button" class="btn btn-success-outline">Success</button>, у меня появляется серая кнопка, которая не имеет видимого стиля which looks like this ... Может ли кто-нибудь помочь мне? Спасибо!

Answer 1

Уверены, что файлы bootstrap css работают? Потому что в этом коде <button type="button" class="btn btn-success-outline">Success</button> он не указывает ничего, кроме btn-success-outline (что вы сказали). Вы должны проверить, работают ли ваши файлы css или другие документы начальной загрузки. он работает для меня

Answer 2

Если ваш Bootstrap работает нормально. Чем вы можете попробовать этот код.

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

plz проверить ваш родительский div. Этот div использует Float css. Если использование float, а не btn, необходимо очистить: both;

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

Если вы выбираете первый вариант с выше CSS, в вашем использовании HTML:

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

Answer 4

FYI он теперь был переименован в БТН-Контур *

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

Answer 5

причина, по которой вы не работаете, - это btn-outline-success, а не btn-success-outline.