Bootstrap закругленный верхний правый угол

Question

У меня есть Bootstrap list-group-flush для отображения левой вертикальной навигации.

Я хочу, чтобы верхний левый угол был закруглен.class="rounded-top" работает, но class="rounded-top-left", или class="rounded top-left" ничего не делает?

Answer 1

В соответствии с документацией по Bootstrap 4.3, нет никаких служебных классов, чтобы округлять только один угол: https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius. Если вы хотите этот класс, вам придется написать его самостоятельно.

Я просто быстро просмотрел Bootstrap 3.4 и 4.2.1.Версия 3.4 не имеет классов радиуса границы, а 4.2 имеет меньше опций, так что это не то, что вы можете исправить, переключившись на другую версию.

Answer 2

Я отказался от использования собственного кода Bootstrap по умолчанию и использовал следующий CSS:

#corner1 {
            border-top-left-radius: 3px;
        }

<a href="home" id="corner1" class="list-group-item">Link here</a>

UPDATE: похоже, Bootstrap не допускает округления одного угла https://v4 -alpha.getbootstrap.com / утилиты / бордюры /

Answer 3

Вы всегда можете создавать свои собственные глобальные классы.Например:

.rounded-top-left-1 {
    border-top-left-radius: 1rem;
}
.rounded-top-right-1 {
    border-top-right-radius: 1rem;
}
.rounded-bottom-left-1 {
    border-bottom-left-radius: 1rem;
}
.rounded-bottom-right-1 {
    border-bottom-right-radius: 1rem;
}