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

Question

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

这是按钮的图像

我希望Puppies和Cost位于同一位置，但是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>

非常感谢您的帮助！

Answer 1

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

基本上，使用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>`

Answer 2

假设您的按钮是这样的。

import os
import glob

path = r'C:\Desktop\MyFolder'
allfiles =[os.path.basename(file) for file in  glob.glob(path + '\*.*')]
diff_pattern=set()
deletefile=[]

for file in allfiles:
    diff_pattern.add('_'.join(file.split('_',2)[:2]))

print('Pattern Found - ',diff_pattern)
for pattern in diff_pattern:
    patternfiles=[os.path.basename(file) for file in  glob.glob(path + '\\'+pattern+'_*.*')]
    patternfiles.sort()
    if len(patternfiles)>1:
        deletefile=deletefile+patternfiles[:len(patternfiles)-1]

print('Files Need to Delete - ',deletefile)

for file in deletefile:
    os.remove(path+'\\'+file)
print('File Deleted')

您也许应该以这种方式做某事（未经测试）。

<button id="BP"><button>

然后是CSS。

var BP = document.getElementById("BP");
var span = BP.appendChild(document.createElement("span"));
span.textContent = "Puppies x" + puppyarray.length;
var small = BP.appendChild(document.createElement("small"));
small.textContent = "Cost : " + puppiescost;