如何垂直放置两个按钮，以便它们将每个按钮的高度均等化为50％

Question

我想在Bootstrap中执行+和-按钮，以便+在-上方，并且它们分别具有整个div高度的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(or you can change the name but add it to parent div) {
   display: flex;
   flex-direction: column;
}

或尝试将span标签更改为div

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

select a.*,
       row_number() over (partition by category, (seqnum_2 - seqnum) order by vDateTime) as expected_output
from (select a.*,
             row_number() over (order by vDateTime) as seqnum,
             row_number() over (partition by category order by vDateTime) as seqnum_2,
      from tbla 
     ) a
order by vDateTime, Category;

使用此CSS。