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

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

Ответ 1

У меня была аналогичная проблема. Вы можете просто установить правило в 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>

Ответ 2

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

Ответ 3

FYI теперь он был переименован в btn-outline- *

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Проблема совместимости контура кнопок Chrome: в вашем коде <button type="button" class="btn btn-success-outline">Success</button> с начальной загрузкой> 4.1.x я обнаружил, что включение type="button" нарушит эффект контура в Chrome, но он работает в Firefox.