You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap按钮右对齐求助:无法将按钮放置到目标位置

实现Bootstrap按钮右对齐的解决方案

要让按钮右对齐,只需用Bootstrap的flex布局类包裹按钮组即可,以下是修改后的完整代码:

<p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p>
<br />
<div class="border  text-center">
    <p class="h5 text-center">Durch Ihre Entnahme fällt der Lagerbestand unter die vom Administrator festgelegte Mindestmenge! </p>
    <br>
    <p class="h5">Sie sind dazu angehalten das Order-Managment zu Informieren! Mach Sie das indem Sie auf den Nachfolgenden Button drücken </p>
</div>
<br />
<!-- 新增flex容器实现右对齐 -->
<div class="d-flex justify-content-end gap-3">
    <button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
    <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>
</div>

关键类说明:

  • d-flex:将父容器设置为flex布局,开启灵活的对齐能力
  • justify-content-end:让容器内的元素沿水平方向向右对齐
  • gap-3:给按钮之间添加固定间距,优化视觉体验(可选,可根据需求调整间距大小,比如gap-2)

如果更倾向于用文本对齐的方式,也可以用text-end类包裹按钮组:

<div class="text-end">
    <button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
    <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>
</div>

这种方式适合简单的块级对齐,flex布局则更适合需要调整元素间距、对齐方式的场景。

内容的提问来源于stack exchange,提问作者Fabian M

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 22:20:27