Question

我想为只有顶部边框的列表组提供透明背景。现在我得到默认的白色背景。

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

Answer 1

你可以试试这个，它会起作用。很容易，你甚至没有尝试过。

.list-group-item {
background-color: transparent;
border-top: 1px solid #ddd;
border-radius: 0;
color: #fff;
}

Answer 2

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

Answer 3

.list-group-flush 将去掉边框和圆角，在列表项之间只留下一条水平线以将它们彼此分开。

.bg-transparent 将使背景透明

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

如何为bootstrap list group提供透明背景？

3 个答案: