@parkito

Как выровнить кнопки?

Здравствуйте. Подскажите, пожалуйста, как сделать кнопки одникаового размера, несмотря на различной длинный текст.
https://jsfiddle.net/parkito/kLe5233e/1/

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">UnBlock</button>
<br>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Block</button>


.btn-danger {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e43725;
    line-height: 20px
    width: 100%;

}

.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .btn-danger.open, .open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #d62c1a;
    border-color: #b62516
}

.btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    background-image: none
}

.btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active {
    background-color: #e74c3c;
    border-color: #e43725
}

.btn-danger .badge {
    color: #e74c3c;
    background-color: #fff
}


.btn-success {
    color: #fff;
    background-color: #2ecc71;
    border-color: #29b765;
    line-height: 20px
    width: 100%;
}

.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .btn-success.open, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #25a25a;
    border-color: #1e854a
}

.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    background-image: none
}

.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {
    background-color: #2ecc71;
    border-color: #29b765
}

.btn-success .badge {
    color: #2ecc71;
    background-color: #fff
}
  • Вопрос задан
  • 134 просмотра
Решения вопроса 2
@Andrey_Hmytron
Для начала проставьте точку с запятой после line-height: 20px
А потом через width подберите ширину которая Вам нужна
Ответ написан
Комментировать
pashted
@pashted
тыжпрограммист
.btn {
min-width:80px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы