当我尝试将新的引导图标添加到按钮时,图像似乎有些偏离:
我可以在底部添加边距,但这似乎是一种“解决方法”。如果我检查以下代码: https: //icons.getbootstrap.com/icons/x-circle/,他们也没有使用任何解决方法,但它看起来符合预期。
这就是我添加按钮的方式:
<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
Run Code Online (Sandbox Code Playgroud)
我发现的一个细微差别是,如果通过图标字体而不是 svg 获取图标,它会在图像顶部添加一些空间,而我无法通过任何填充控件来消除这些空间。
我按照“安装”说明一步步操作,其他组件按预期工作。字体也很棒,就像一个魅力。
有什么想法如何解决这个问题吗?
编辑:谢谢大家到目前为止的回复。我经历了所有这些:
@维沙尔:
<div style="text-align:center; width:100%;">
<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
</div>
Run Code Online (Sandbox Code Playgroud)
@乔治:
<a href="#" type="button" class="d-flex justify-content-center align-items-center col-12 btn btn-danger"><i class="bi bi-x-circle pr-2"></i> Cancel</a>
Run Code Online (Sandbox Code Playgroud)
这里我必须将 col-1 扩展到 col-12。但随后它也产生了这个按钮:

@camaulay:如果我使用 svg 并调整宽度和高度(将两者设置为 20)并将视图框定位调整为“0 0 20 20”,结果实际上看起来如预期:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 20 20">
Run Code Online (Sandbox Code Playgroud)
所以我可以将其标记为正确答案。不过我想知道为什么<i>-Tag 会导致如此奇怪的行为?
如果我将边框类添加到“图片”中,那么人们会看到图像顶部有一些额外的空间:
<a href="#" type="button" class="btn …Run Code Online (Sandbox Code Playgroud) 我遇到了这种非常奇怪的行为,当我在视图中保存新的模型实例时,分配的文件会被保存,但是当我在 Celery 中这样做时,实例会被保存,但文件不会被保存。
这些是我的观点(缩短):
def post(self, request, *args, **kwargs):
[...]
html = render_to_string('pdf/w_html.html', {'request': self.object})
out = BytesIO()
HTML(string=html).write_pdf(out, stylesheets=[CSS(settings.STATIC_ROOT + "/css/pdf.css"),
'https://fonts.googleapis.com/css2?family=Montserrat&family=Playfair+Display&display=swap'])
document = Document(product=product, document_type=4,
language=1, date=timezone.now().date(),
file=File(out, name='Best_Execution_Report.pdf'))
document.save()
Run Code Online (Sandbox Code Playgroud)
其中 self.object 是 Request 实例。上面的代码完全做了它应该做的事情(即保存模型和生成的 pdf)。
但是一旦我将上面的代码修改为这样:
def post(self, request, *args, **kwargs):
[...]
generate_best_execution_report.apply_async(kwargs={'request_id': self.object.pk})
Run Code Online (Sandbox Code Playgroud)
执行以下 celery 任务:
@shared_task
def generate_best_execution_report(request_id):
"""Task to automatically generate best execution Reports and save it to the Documents Model (of the product app)."""
request_obj = Request.objects.get(pk=request_id)
logger.info(request_obj)
html = render_to_string('pdf/w_html.html', {'request': request_obj}) …Run Code Online (Sandbox Code Playgroud)