Bootstrap 4：仅在li元素上的底部边框

Question

我正在创建一个侧边栏，除了最后一个元素之外，每个li元素后面都需要有一个底边框。但Bootstrap 4已经在list-group-items上有边框，如果我添加border-0，它会完全删除它们。我似乎无法弄清楚如何通过CSS编辑它，所以它的工作原理。它只显示最后一个li元素后面的一个底部边框。

这是我正在尝试制作的快速图像预览：

这是我的代码：

.sidebar {
    position: fixed;
    z-index: 9999;
  }
  .menu {
    position: fixed;
    background-color: #fff;
    height: 100vw;
    width: 90px;
    top: 60px;
    overflow: hidden;
    .list-group-item {
      border: 0;
    }
    a {
      color: gray;
      font-size: 16px;
      span {
      white-space: nowrap;
    }
    }
  }
  .menu:hover {
    width: 260px;
  }

<div class="sidebar">
      <ul class="list-group flex-column d-inline-block menu">
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
      </ul>
    </div> <!-- /.sidebar -->

Answer 1

您只能为.menu内的.list-group-item设置边框，您还可以使用:last-child选择器将最后一个li元素的底边设置为0：

＆＃13;

＆＃13;

.sidebar {
  position: fixed;
  z-index: 9999;
}
.menu {
  position: fixed;
  background-color: #fff;
  height: 100vw;
  width: 90px;
  top: 60px;
  overflow: hidden;
}
.menu .list-group-item {
  border-bottom: 1px;
}
.menu .list-group-item:last-child {
  border-bottom: 0;
}

.menu a {
  color: gray;
  font-size: 16px;
}
.menu a span {
  white-space: nowrap;
}
.menu:hover {
  width: 260px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="sidebar">
      <ul class="list-group flex-column d-inline-block menu">
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
        <li class="list-group-item py-2">
          <a href="#">
            <span class="align-middle"><img src="https://placehold.it/50x50" height="50" class="mr-4">Text</span>
          </a>
        </li> <!-- /.list-group-item -->
        
      </ul>
    </div> <!-- /.sidebar -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试last-of-type更改最后一项的任何样式

.list-group-item:last-of-type {
  border-bottom: 0;
}

Answer 3

您可以在ul li：

上使用::last-child

  .sidebar {
    position: fixed;
    z-index: 9999;
  }
  .menu {
    position: fixed;
    background-color: #fff;
    height: 100vw;
    width: 90px;
    top: 60px;
    overflow: hidden;
    .list-group-item:last-child {
      border-bottom: 0;
    }
    a {
      color: gray;
      font-size: 16px;
      span {
      white-space: nowrap;
    }
    }
  }
  .menu:hover {
    width: 260px;
  }

Answer 4

<h5 class="card-title">This should work (No css needed)</h5>
<ul class="list-group list-group-flush">
    <li class="list-group-item">First</li>
    <li class="list-group-item">Seccond</li>
    <li class="list-group-item">Third</li>
    <li class="list-group-item">Fourth</li>
</ul>