Удаление границы-радиуса в Bootstrap 4 |Список-группа-пункт

Question

Я новичок в начальной загрузке и уже перешел на использование свойства начальной границы с моим пользовательским классом CSS.

.border-radius-none{
    border-radius: 0;
}

Изображение:

Это работает для всех случаев, но во время езды list-group-item, первый и последний элемент не перегружены.

1. Мой основной CSS связан ниже загрузочного CSS (как в следующем фрагменте)
2. Чтение статья о специфике CSS, которая мне не помогает.

Вещи, которые я пробовал

1. Добавлено !important к моему CSS.

Есть ли другой способ удалить значение по умолчанию начального радиуса начальной загрузки, без использования важных?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
<link href="./Main.css" rel="stylesheet">


<li class="list-group-item bg-black white-text border-none">
    <div class="row">
        <div class="col-9"> Latest Jobs </div>
        <div class="col-3">
            <a href="#" class="mr-auto">View all</a>
        </div>


    </div>
</li>

Answer 1

вы можете проверить Расчет значения специфичности CSS

.list-item-group: first-child = 0,0,2,0 (класс * 1 + псевдо-класс * 1)

• .list-item-group: 0,0,1,0
• : первый ребенок:0,0,1,0

.border-none равно 0,0,1,0 (класс * 1)

---

у вас есть несколько способов добавить свой CSSзначение специфичности, простой способ использования двух классов

.border-none,
.border-none.list-group-item {
   border-radius : 0;
}

<li class="list-group-item bg-black white-text border-none">
    <div class="row">
        <div class="col-9"> Latest Jobs </div>
        <div class="col-3">
            <a href="#" class="mr-auto">View all</a>
        </div>


    </div>
</li>

Answer 2

это другой способ написать border-radius: 0;встроенный

.list-group-item
{
    border-radius: 34px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
<link href="./Main.css" rel="stylesheet">


<li class="list-group-item bg-black white-text border-none" style=" border-radius: 0;">
    <div class="row">
        <div class="col-9"> Latest Jobs </div>
        <div class="col-3">
            <a href="#" class="mr-auto">View all</a>
        </div>


    </div>
</li>

Answer 3

Некоторые классы предопределены в начальной загрузке в соответствии с документацией class="rounded-0", которая установит border-radius в 0

https://getbootstrap.com/docs/4.0/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
   <ul class="list-group">
     <li class="list-group-item rounded-0">Cat</li>
     <li class="list-group-item rounded-0">Dog</li>
     <li class="list-group-item rounded-0">Rabbit</li>
     <li class="list-group-item rounded-0">Alpaca</li>
   </ul>
 </div>

Answer 4

вместо использования .border-radius-none{ border-radius: 0; }

используйте .border-radius-none{ border-radius: none; }

И если вы не хотите добавлять! Важно просто попробуйте указать класс использования .classname>.innerclass{border:none;}

Answer 5

Добавьте этот класс к вашему CSS, чтобы переопределить .list-group-item или .list-group-item:last-child и поместить ссылку на ваш CSS после ссылки CSS Boostrap

    .list-group-item{
                border-radius: 0;
     }

или

.list-group-item:last-child{
                border-radius: 0;
     }