Question

我正在使用Bootstrap 3来创建一个小应用程序。我需要使用他们的linked list但不想要圆形边框。

从CSS文件中，他们使用以下内容：

.list-group-item:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

目前，我使用以下内容覆盖类：

.list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

这个问题是，这使我所有列表都没有边框。有没有办法覆盖我使用它的这个单个实例？

以下是bootstrap中有关如何使用它的示例（http://getbootstrap.com/components/#list-group-linked）：

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Answer 1

您可以为list-group添加特殊的班级名称，例如list-special吗？然后使用......

CSS

.list-special .list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.list-special .list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

HTML

<div class="list-group list-special">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

演示：http://bootply.com/95585

编辑：使用CSS通常不是一个好习惯！重要。由于list-special提供了更多特异性，因此您可以删除!important。我更新了Bootply，以便您可以看到它是如何工作的。

Answer 2

只需在包含的div中添加一个额外的类。

<div class="list-group special">
    <a href="#" class="list-group-item active">
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

然后通过css：

定位它

.special .list-group-item:first-child {
   border-top-right-radius: 0px !important;
   border-top-left-radius: 0px !important;
}

.special .list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

编辑：根据要求提供了一个bootply链接：bootply

Answer 3

.list-pers .list-group-item{border-radius: 0px !important;}

删除List的边界半径而不覆盖全局（Bootstrap 3）

3 个答案: