引导程序中按钮旁边的文本框（非输入）答案

【问题标题】：text box (not input) next to button in bootstrap引导程序中按钮旁边的文本框（非输入）
【发布时间】：2022-01-13 00:44:56
【问题描述】：

我有这个（“CIR”、“+”和“-”是按钮）：

enter image description here

我想要这个（“0”可以是任何数字字符串，所以当我按“+”或“-”时，它会分别递增或递减（我知道如何使用 JS））：

enter image description here

我现在的代码是：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" @click="initCir">CIR</button>
  <button type="button" class="btn btn-light" @click="incCir">+</button>
  <button type="button" class="btn btn-light mr-2" @click="decCir">-</button>
</div>

我一直在搜索，但在此处的 Bootstrap 或其他问题的文档中找不到任何内容。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

好像这个人有同样的问题..不想窃取答案，但这个人解释得很好。

Increment and decrement a number with Bootstrap design

<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" @click="initCir">CIR</button>
  <button type="button" class="btn btn-light" @click="incCir" data-field="quant[1]" data-type="plus">+</button>
  <button type="button" class="btn btn-light mr-2" @click="decCir" data-field="quant[1]" data-type="minus">-</button>
</div>

【讨论】：

【解决方案2】：

好吧，在用 CSS 尝试了一个小时后，我提出了一个可行的解决方案（至少对于我的目的而言）：

<div id="btn-counter-cir" class="btn btn-light" style="pointer-events: none">Something</div>

然后使用document.getElementById("btn-counter-cir").innerHTML = 0;，我可以使用相应的按钮执行我想要的递增和递减操作。

【讨论】：