删除Bootstrap 4中的border-radius 列表组项

Question

我是bootstrap的新手,并且已经在我的自定义CSS类中使用bootstrap border-radius属性.

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

图片:

这适用于所有情况,但在骑行时list-group-item,第一个和最后一个元素不会被过度使用.

1. 我的主要css链接在bootstrap css下面.(如下面的代码片段所示)
2. 阅读关于CSS特异性的文章,这对我没有帮助.

我试过的事情

1. 添加!important到我的CSS.

有没有其他方法可以删除bootstrap border-radius默认值,而不使用重要的？

<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

一些类在引导预定义为每个文件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>