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

【问题标题】：How to remove a list item border in bootstrap list group?如何删除引导列表组中的列表项边框？
【发布时间】：2015-11-26 04:02:40
【问题描述】：

我只想删除第一个 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;
}

但不起作用，任何人都可以帮助我，提前谢谢！

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

问题：

您正在尝试的当前代码是后代选择器，并且仅当 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>

【讨论】：

【解决方案3】：

您可以利用 :nth-child() 选择器，因此您无需添加 borderless 类。

例子：

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

干杯！

【讨论】：

【解决方案4】：

您可以通过在 style 元素中将 border 声明为 none 来移除边框。请看下文

<h2>Basic List Group</h2>
  <ul class="list-group">
    <li class="list-group-item" style="border: none">First item</li>
    <li class="list-group-item" style="border: none">Second item</li>
    <li class="list-group-item" style="border: none">Third item</li>
  </ul>

【讨论】：

这不是这样做的引导方式

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我用这个：

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

【讨论】：

【解决方案7】：

对于 Bootstrap 5，我们可以使用“list-group-item-light”类来移除 list-group-item 中的边框，

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

【讨论】：

【解决方案8】：

对于 Bootstrap 5，我们可以使用类 border-0 来移除 list-group-item 中的边框，

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

【讨论】：

【解决方案9】：

将border-0 类放入您的HTML 代码中的所有<li> 元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>5. First bootstrap page with layout</title>
</head>

<body>
    <div class="container-flex">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive paage to see th effect!</p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="list-group">
                    <li class="list-group-item border-0">
                        <p class="h3">CHARUSAT</p>
                    </li>
                    <li class="list-group-item border-0">Dapibus ac facilisis in</li>
                    <li class="list-group-item border-0">Morbi leo risus</li>
                    <li class="list-group-item border-0">Porta ac consectetur ac</li>
                    <li class="list-group-item border-0">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：