Come rimuovere un bordo di una lista nel gruppo di lista bootstrap?

Question

voglio solo rimuovere il primo elenco-group-item bordo superiore:

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

ma non funziona, chiunque può aiutarmi, Grazie in anticipo!

Answer 1

Problema:

Il codice corrente che si sta cercando è un selettore discendente e funziona solo quando li è il figlio di .borderless come di seguito:

<div class="borderless"> 
    <li></li> 

Soluzione:

Prova il seguente selettore di classi multiple che seleziona le voci dell'elenco che ha una classe borderless.

li.borderless { border-top: 0 none; } 

---

uscita:

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>

Answer 2

È possibile usufruire del : nth-child() selettore, quindi non c'è bisogno di aggiungi la classe senza bordi.

Esempio:

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

Il markup

.list-group li:nth-child(1){ 
    border-top: 0 none; 
} 

Cheers!

Answer 3

È possibile rimuovere i bordi dichiarando il bordo su none, nell'elemento style. Si prega di vedere sotto

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