我有以下 HTML
<h2 class="border-center-right mt-4">
<span class="bg-white float-left">CREDITCARDNAME</span>
<button type="button" class="btn btn-primary float-right">APPLY NOW</button>
</h2>
我正在使用 Bootstrap 4。边框当前与“立即应用”按钮重叠。我怎样才能使边框位于按钮后面?
谢谢!
我将代码添加到以下 Fiddle:https://jsfiddle.net/katzumi/98c5q2cf/
这些是当前应用于<h2 class="border-center-right mt-4">
的边框样式:
最佳答案
您应该能够从您的 span 中移除 float-left。
我将边框设为红色,这样在白色背景下更容易看清。
<div class="container mb-5">
<h2 class="border-center-right mt-4" style="border-bottom: 1px solid red;">
<span class="d-inline-block bg-white">CREDITCARDNAME</span>
<button type="button" class="d-inline-block btn btn-primary float-right">APPLY NOW</button>
</h2>
<div class="text-4-col">
</div>
</div>
关于css - Bootstrap 4 边框重叠按钮元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50106832/