Bootstrap 4边框重叠按钮元素

Question

我有以下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。边框当前与 "Apply Now" 按钮重叠。我怎样才能使边框位于按钮后面？

谢谢！

我在下面添加了代码Fiddle：https://jsfiddle.net/katzumi/98c5q2cf/

这些是目前应用于<h2 class="border-center-right mt-4">的边框样式：

Answer 1

您应该能够从您的 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>

https://jsfiddle.net/98c5q2cf/2/

Answer 2

已修复！我减少了元素 &:: 在 border-center-right class.

之后的宽度

@include media-breakpoint-up(sm) {
  .border-center-right {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      display: inline-block;
      height: 1px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      **width: 50%;**
      background: $accent-secondary;
      margin-left: 1rem;
    }
  }
}

Bootstrap 4边框重叠按钮元素

Bootstrap 4 border overlapping button element

css

border

button

twitter-bootstrap

bootstrap-4