如何在bootstrap中设置span的span固定宽度

Question

我在电子商务网站工作，在此我需要解决以下问题。 当我添加产品到购物车时添加了数量，但是跨度会根据数量增加它的大小如何解决这个问题......

当我添加100个产品时，这是跨度宽度。

当我减少产品数时，跨度宽度也减小

如果我删除产品Span得到它的正常宽度

我需要的是我希望跨度宽度为正常宽度，当我将产品添加到购物车时，计数器跨度只会增加它的宽度。

这是我写的代码......

<form class="form-inline">
          <div class="input-group">
            <div class="input-group-prepend ">
              <span class="input-group-text" id="crt">
                  <span class=" notification-counter badge badge-danger">{{nCount}}</span>
                <i class="fas fa-cart-plus fa-flip-horizontal text-primary" style="font-size:30px"></i>   
              </span>
            </div>
            <input type="text" class="form-control bg-white" value="My Cart ({{nCount}})" readonly>
          </div>
        </form>

CSS

.notification-counter {   
    position: relative;
    bottom: 12px;
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 10px;
    padding: 2px 2px 2px 2px;
    font: 11px Verdana;
}

以及如何使计数器跨度形状为圆形，当我添加单个产品时，它看起来像这样

谢谢......