在 Bootstrap 4 中删除边界半径 |列表组项答案

【问题标题】：Removing border-radius in Bootstrap 4 | list-group-item在 Bootstrap 4 中删除边界半径 |列表组项
【发布时间】：2018-11-13 19:21:00
【问题描述】：

我是 bootstrap 的新手，并且已经使用我的自定义 CSS 类超越了 bootstrap 的border-radius 属性。

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

图片：

这对所有情况都有效，但在覆盖list-group-item 时，第一个和最后一个元素不会被覆盖。

我的主 css 链接在 bootstrap css 下面。（如下 sn-p）
阅读article 了解 CSS 特异性，这对我没有帮助。

我尝试过的事情

在我的 CSS 中添加了 !important。

有没有其他方法可以在不使用重要的情况下删除引导边界半径默认值？

<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>

【问题讨论】：

!important 有什么问题，这是防止覆盖的方法
但是我读到过，这不是解决问题的正确方法，“因为它破坏了样式表中的自然级联，从而使调试变得更加困难”。根据链接中提到的文章。
但是你可以覆盖引导程序的唯一方法

标签： html twitter-bootstrap css

【解决方案1】：

将此类添加到您的 css 以覆盖 .list-group-item 或 .list-group-item:last-child 并将指向 css 的链接放在 boostrap css 链接之后

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

或

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

【讨论】：

他已经有了这个并且试图在他的 CSS 中避免 !important。
当然我已经删除了重要的，只要类被覆盖，边框半径就会删除

【解决方案2】：

根据文档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>

【讨论】：

【解决方案3】：

而不是使用.border-radius-none{ border-radius: 0; }

使用.border-radius-none{ border-radius: none; }

如果您不想添加 !important，请尝试指定类使用 .classname>.innerclass{border:none;}

【讨论】：

没有边框半径值：无；

【解决方案4】：

这是另一种写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>

【讨论】：

style="border-radius: 0;"使用风格
这是糟糕的编码习惯！！
是的，我知道，但只有这样才能在不使用 !important 的情况下删除边框半径
这个类已经在ans中了，所以
.rounded-0 { 边界半径：0！重要； }

【解决方案5】：

您可以查看Calculating CSS Specificity Value

.list-item-group:first-child is 0,0,2,0(class *1 + psuedo-class *1)

.list-item-group : 0,0,1,0
:first-child : 0,0,1,0

.border-none 是 0,0,1,0 (class * 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>

【讨论】：