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

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

Answer 2

你可以在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 3

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

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

Answer 4

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

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

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