Элемент кнопки перекрытия границы Bootstrap 4
У меня есть следующий 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. В настоящее время граница перекрывает кнопку «Применить сейчас». Как сделать так, чтобы граница находилась за кнопкой?
БЛАГОДАРНОСТЬ!
Я добавил код в следующую скрипку: https://jsfiddle.net/katzumi/98c5q2cf/
И вот стили границ, которые в настоящее время применяются к <h2 class = "border-center-right mt-4">:
Мы не знаем, что применяет border-center-right, поэтому трудно сказать ... Я, может, говорю вам, что указывать d-inline-block с float-left излишне. float: left заменяет display: inline-block ...
Я добавил скрипку и удалил лишний d-inline-block. При необходимости я могу добавить больше деталей. Спасибо!
Ваша рабочий пример не применяет границу, которую вы описываете, поэтому еще раз ... как нам это исправить? I подозревать граница фактически добавляется через псевдоэлемент, z-index которого выше, чем у кнопки.
Извини, @RobertC. Я обновил CSS до SCSS, и теперь вы можете видеть стиль границы (.border-center-right) в строке 53. Это помогает?
Ответы 2
Вы должны иметь возможность просто удалить 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>
Фиксированный! Я уменьшил ширину элемента & :: после класса 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;
}
}
}
Подумайте о том, чтобы добавить скрипку и то, что вы пробовали до сих пор, чтобы мы могли помочь вам в устранении неполадок.