btn-group создала первую кнопку слишком высоко

Question

Я использую btn-group, чтобы сделать ширину buttons 100%, это хорошо работает, но я получаю странный результат на первой кнопке, если вы посмотрите на картинку:

, как вы можете видеть, первая кнопка слишком высока по сравнению с двумя другими.Почему это произошло?

Это мой код:

<div class="btn-group btn-group-justified custom-class btn-block">
    <button type="button" class="btn btn-secondary btn-block">First</button>
    <button type="button" class="btn btn-secondary btn-block">Second</button>
    <button type="button" class="btn btn-secondary btn-block">Third</button>
</div>

Это JSFIDDLE .

Answer 1

Если вы посмотрите на документацию по Bootstrap 4, вы должны сделать следующее:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="btn-group d-flex" role="group">
  <a href="#" class="btn btn-primary w-100">Apple</a>
  <a href="#" class="btn btn-primary w-100">Samsung</a>
  <a href="#" class="btn btn-primary w-100">Sony</a>
</div>

См. Документацию здесь: https://getbootstrap.com/docs/4.1/migration/#button-group

Удалено .btn-выравнивание по группам.В качестве замены вы можете использовать в качестве оболочки для элементов с .w-100.

Answer 2

Попробуйте убрать .btn-block со второй кнопки.Увидел ссылку по этой ссылке: Смотри здесь

<div class="btn-group btn-group-justified custom-class btn-block">
    <button type="button" class="btn btn-secondary btn-block">First</button>
    <button type="button" class="btn btn-secondary">Second</button>
    <button type="button" class="btn btn-secondary btn-block">Third</button>
</div>

Answer 3

Вот, пожалуйста,

<div class="btn-group btn-group-justified custom-class btn-block">
  <button type="button" class="btn btn-secondary">First</button>
  <button type="button" class="btn btn-secondary">Second</button>
  <button type="button" class="btn btn-secondary">Third</button>
</div>

.group-start {
  background-color: #0B3359 !important;
}

#sidebar {
  min-height: 100vh;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  overflow: hidden;
}

.custom-class {
  display: flex;
}

.custom-class .btn {
  flex: 1
}