Bootstrap5 input-group 与 btn-group-vertical

Question

作为标题，我想为号码 increase/decrease 创建一个 input-group。

这是我的代码：

    <div class="input-group input-group-sm">
      <input type="text" class="form-control" placeholder="0.9">
      <div class="btn-group-vertical">
        <button class="btn btn-primary btn-sm" type="button">+</button>
        <button class="btn btn-primary btn-sm" type="button">-</button>
      </div>
    </div>

结果

预期结果

Answer 1

在按钮中添加 p-0，这样代码会像这样：

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="0.9">
  <div class="btn-group-vertical">
    <button class="btn btn-primary btn-sm p-0" type="button">+</button>
    <button class="btn btn-primary btn-sm p-0" type="button">-</button>
  </div>
</div>

Answer 2

您需要添加 py-0 以删除顶部和底部填充，并添加 lh-1 以减少按钮的行高。您的代码应如下所示：

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="0.9">
  <div class="btn-group-vertical">
    <button class="btn btn-primary btn-sm py-0 lh-1" type="button">+</button>
    <button class="btn btn-primary btn-sm py-0 lh-1" type="button">-</button>
  </div>
</div>

Bootstrap5 input-group 与 btn-group-vertical

Bootstrap5 input-group with btn-group-vertical

html

css

bootstrap-5