Как расположить по вертикали две кнопки друг над другом, чтобы они разделяли высоту, равную 50% для каждой

Question

Я хочу сделать кнопки + и - в Bootstrap, чтобы + был на вершине -, и у них по 50% высоты полного деления каждая.

Примерно так:

Итак, я получил ввод и input-group-append, как это:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="input-group-append">
  <span class="btn btn-outline-primary">
        +
    </span>
  <span class="btn btn-outline-danger">
        -
    </span>
</div>

К сожалению, это результат:

Как вы можете видеть, они принимают полный блок, каждый из них, занимая слишком много места. Если бы они могли быть объединены по вертикали, это могло бы сделать больше места для других входных данных.

Как я могу это сделать?

Answer 1

.input-group-append{
    display: flex;
    flex-direction: column;
}

Используйте это css.

Answer 2

Использование Flex свойство

.input-group-append {
  display: flex;
  flex-direction: column;
}

<div class="input-group-append">
  <span class="btn btn-outline-primary">
              +
            </span>
  <span class="btn btn-outline-danger">
              -
            </span>
</div>

Answer 3

Добавьте класс btn-group-vertical к родительскому div

<div class="input-group-append btn-group-vertical">
            <span class="btn btn-primary btn-lg btn-block">
              +
            </span>
            <span class="btn btn-danger btn-lg btn-block">
              -
            </span>
</div>

Answer 4

Вы можете добавить

.input-group-append(or you can change the name but add it to parent div) {
   display: flex;
   flex-direction: column;
}

или просто попробовать изменить span теги на div