javascript - 如何格式化Bootstrap 4按钮以在按钮的不同位置显示部分文本

我想知道如何编辑bootstrap 4按钮的css，以在学校中进行的项目的不同位置显示文本。

这是按钮的图像



我希望“小狗”和“成本”位于同一位置，但x27会放大到按钮的大小并与按钮的右侧对齐。

有人知道怎么做吗？

这是我目前与此问题相关的代码

document.getElementById("BP").innerHTML = " Puppies  x" + puppyarray.length + "<br>" + "Cost: " + puppiescost;

.dogbut:first-line {
  font-size: 20px;
}

.dogbut {
  font-size: 14px;
  text-align: left;
}

<button id="BP" onclick="BP()" type="button" class="btn btn-light w-100 dogbut" data-toggle="tooltip" data-placement="bottom" data-original-title="Cost: 10 | +.3 BPS">
     Puppies
<br>
     Cost: 10 Borks
</button>

非常感谢你的帮助！

最佳答案

有很多方法可以完成此任务。我在下面演示了一个示例，假设您知道此按钮的高度和宽度。可能会有更聪明的替代方案更具活力。

基本上，使用flex来控制元素的位置，并将数据值包装在span中，以通过CSS进行控制。对于这样的恕我直言，使用伪类是真正的痛苦。

button.my-btn{
  width: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height:80px;
}

.my-left{
  display: flex;
  flex-direction:column;
  align-items: flex-start;
}

.number{
  font-size: 40px;
  line-height: 40px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<button class="my-btn btn btn-primary">
 <div class="my-left">
   <span class="puppies">Puppies</span>
   <span class="cost">Cost: 1331</span>
  </div>
  <div class="my-right">
    <span class="number">x27</span>
  </div>
</button>

编辑：包括JS eh可能很重要

这是我修改您的修改DOM的js的方法

document.getElementById("BP").innerHTML = `<div class="my-left">
   <span class="puppies">Puppies</span>
   <span class="cost">Cost: ${puppiescost}</span>
  </div>
  <div class="my-right">
    <span class="number">x${puppyarray.length}</span>
  </div>`