CSS 如何删除引导程序列表组中的列表项边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32322775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove a list item border in bootstrap list group?
提问by pangpang
I just want to remove the first list-group-item top border:
我只想删除第一个 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;
}
but doesn't work, Anybody can help me, Thanks in advance!
但不起作用，任何人都可以帮助我，提前致谢！
回答by Mike
In Bootstrap 4.0 you can simply set each individually or all using the border-* class.
在 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 />
回答by Manoj Kumar
Problem:
问题：
The current code you are trying is a descendant selector and will only work when liis the child of .borderlesslike below:
您正在尝试的当前代码是一个后代选择器，并且仅在下面li的子项时才有效.borderless：
<div class="borderless">
<li></li>
Solution:
解决方案：
Try the below multiple class selector which selects the list items which has a class borderless.
尝试下面的多类选择器，它选择具有 class 的列表项borderless。
li.borderless { border-top: 0 none; }
Output:
输出：
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>回答by Sergio Marron
You can take advantage of the :nth-child()Selector, so you don't need to add the borderlessclass.
您可以利用:nth-child()选择器，因此您无需添加无边框类。
Example:
例子：
<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>
The markup
标记
.list-group li:nth-child(1){
border-top: 0 none;
}
Cheers!
干杯!
回答by SHINERAJ ARATHIL
You can remove borders by declaring border to none , in style element. Please see below
您可以通过在 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>
回答by javapedia.net
The bootstrap class .list-group-flushmay also be used to remove some of the borders.
bootstrap 类.list-group-flush也可以用来移除一些边框。
https://getbootstrap.com/docs/4.0/components/list-group/#flush
https://getbootstrap.com/docs/4.0/components/list-group/#flush
