如何解决带Bootstrap的HTML:按钮右对齐,并且div以新行居中
在我的网页中(使用Bootstrap),我需要显示一个右对齐的按钮和一个位于新行中心的微调器。
但是我将微调器放在同一行中,以该行的其余部分为中心...
我的代码:
<div>
<button type="button" class="btn btn-primary mt-4 float-right">Text</button>
</div>
<div class="text-center mt-4">
<div class="spinner-border" role="status"></div>
</div>
我在做什么错了?
谢谢
迭戈
解决方法
您可以使用Bootstrap's grid system并用全角列定义两行。我将margin-top
mt-4
移到了第二个.row
,以便将空白留给整行。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary mt-4 float-right">Text</button>
</div>
</div>
<div class="row mt-4">
<div class="col text-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
要将<button>
放到最右边,只需移除<div class="container">
。请阅读this了解更多信息。
当然,还有其他几种方法可以接收所需的结果,例如,使用equal-width multi-lines:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary mt-4 float-right">Text</button>
</div>
<div class="w-100"></div>
<div class="col mt-4 text-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
祝你好运!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。