Элемент кнопки перекрытия границ Bootstrap 4 - PullRequest
Новая
       31

Элемент кнопки перекрытия границ Bootstrap 4

0 голосов
/ 30 апреля 2018

У меня есть следующий 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. Граница в настоящее время перекрывает кнопку «Применить сейчас». Как я могу сделать так, чтобы граница находилась за кнопкой?

bootstrap4

СПАСИБО!

Я добавил код к следующей скрипке: https://jsfiddle.net/katzumi/98c5q2cf/

И это стили границ, которые в настоящее время применяются к <h2 class="border-center-right mt-4">:

enter image description here

enter image description here

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Исправлена! Я уменьшил ширину элемента & :: после класса border-center-right. 

@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;
    }
  }
}
0 голосов
/ 30 апреля 2018

Вы должны иметь возможность просто удалить 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/

...