bootstrap 中按钮旁边的文本框（未输入）

Question

我有这个（“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 或此处其他问题的文档中找不到任何内容。

Answer 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>

Answer 2

好吧，在用 CSS 尝试了很多东西后一个小时，我想出了一个可行的解决方案（至少对我来说是这样）：

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

然后用 document.getElementById("btn-counter-cir").innerHTML = 0; 我可以用相应的按钮做我想做的递增和递减。

bootstrap 中按钮旁边的文本框（未输入）

text box (not input) next to button in bootstrap

bootstrap-4