Question

我只想删除第一个list-group-item顶部边框：

<ul class="list-group">
  <li class="list-group-item borderless">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

.borderless li {
    border-top: none;
}

但是没有用，任何人都可以帮助我，提前致谢！

Answer 1

<强>问题：

您正在尝试的当前代码是后代选择器，仅在li是.borderless的子代时才有效，如下所示：

<div class="borderless">
  <li></li>

<强>解决方案：

尝试下面的多个类选择器，选择具有类borderless的列表项。

li.borderless { border-top: 0 none; }

<强>输出：

li.borderless {
  border-top: 0 none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="list-group">
  <li class="list-group-item borderless">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Answer 2

在Bootstrap 4.0中，您可以使用border- *类单独或全部设置每个。

<ul class="list-group">
    <li class="list-group-item border-0">One</li>
    <li class="list-group-item border-top-0">Two</li>
    <li class="list-group-item border-right-0">Three</li>
    <li class="list-group-item border-bottom-0">Four</li>
    <li class="list-group-item border-left-0">Five</li>
<ul />

Bootstrap 4.0 Borders Documententation

Answer 3

您可以利用：nth-child（）选择器，因此您无需添加无边框类。

示例：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

标记

.list-group li:nth-child(1){
  border-top: 0 none;
}

干杯！

Answer 4

您可以在样式元素中通过将边框声明为无来删除边框。请看下面的

public function report(Exception $e)
{
    if ($this->shouldReport($e)) {
        app('sentry')->captureException($e);
    }
    parent::report($e);
}

Answer 5

引导类 .list-group-flush 也可以用于删除某些边框。

https://getbootstrap.com/docs/4.0/components/list-group/#flush

Answer 6

我用这个：

  <ul *ngFor="let f of checkFields" class="list-group border-0">
    <li  class="list-group-item border-0"> {{f.title}}</li>
  </ul>

如何删除引导列表组中的列表项边框？

6 个答案: