Wie entferne ich einen Listenelementrahmen in der Bootstrap-Listengruppe?

Question

Ich möchte nur die erste Liste gruppen Artikel oberen Rand entfernen:

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

aber nicht funktioniert, Wer kann mir helfen, Vielen Dank im Voraus!

Answer 1

Problem:

Der aktuelle Code, den Sie versuchen werden, ist ein Nachkomme Wähler und wird nur funktionieren, wenn li das Kind von .borderless wie unten:

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

Lösung:

Probieren Sie den folgenden Mehrfachklassenselektor aus, der die Listenelemente mit der Klasseauswählt 0.

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

---

Ausgang:

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

Sie können die Vorteile der nehmen: nth-child() Selector, so dass Sie nicht brauchen, Fügen Sie die randlose Klasse hinzu.

Beispiel:

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

Das Markup

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

Prost!

Answer 3

Sie können die Rahmen entfernen, indem Sie im Stilelement Grenze auf Keine festlegen. Siehe unten

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