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

我正在制作一个侧边栏，每个li元素之后需要有一个底部边框，除了最后一个元素。但Bootstrap 4已经在list-group-items上有边框，如果我添加border-0，它将完全删除它们。我似乎无法弄清楚如何通过CSS编辑这个工作。它仅在最后一个li元素后面显示一个底部边框。Bootstrap 4：仅在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 -->

来源

2017-05-21 Retros

哦，好吧！我将添加SCSS标签。 – Retros

您可以设置边框只适用于您的.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 -->

来源

2017-05-21 20:02:27 Dekel

是的，但Bootstrap 4添加了哪些默认边界呢？图像预览显示如何删除它们并只有底部边框？ – Retros

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

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

来源

2017-05-21 20:02:45 maxbeatty

您可以使用::last-child on ul li：

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

来源

2017-05-21 20:14:32

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

回答

相关问题