Listenin sınır yarıçapını global olarak geçersiz kılmadan kaldırın (Bootstrap 3)

Question

Küçük bir uygulama oluşturmak için Bootstrap 3 kullanıyorum. Onların linked list'unu kullanmam gerekiyor ama yuvarlak kenarları istemiyorum. CSS dosyasından

, bunlar aşağıdaki kullanın: Şu anda

.list-group-item:first-child { 
    border-top-right-radius: 4px; 
    border-top-left-radius: 4px; 
} 

.list-group-item:last-child { 
    margin-bottom: 0; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

i kullanarak sınıfları geçersiz şunlardır:

.list-group-item:first-child { 
    border-top-right-radius: 0px !important; 
    border-top-left-radius: 0px !important; 
} 

.list-group-item:last-child { 
    border-bottom-right-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 
} 

bu sorun bu tüm listeler sağlamasıdır Sınırlarım yok. Sadece kullandığım bu tek örnek için geçersiz kılmanın bir yolu var mı?

İşte nasıl kullanılacağına dair bootstrap gelen bir örnek bu (http://getbootstrap.com/components/#list-group-linked):

<div class="list-group"> 
    <a href="#" class="list-group-item active"> 
    Cras justo odio 
    </a> 
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
    <a href="#" class="list-group-item">Morbi leo risus</a> 
    <a href="#" class="list-group-item">Porta ac consectetur ac</a> 
    <a href="#" class="list-group-item">Vestibulum at eros</a> 
</div> 

Answer 1

Eğer senin list-group böyle list-special olarak özel bir sınıf adını ekleyebilir miyim? Sonra

CSS

.list-special .list-group-item:first-child { 
    border-top-right-radius: 0px !important; 
    border-top-left-radius: 0px !important; 
} 

.list-special .list-group-item:last-child { 
    border-bottom-right-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 
} 

HTML ... kullanmak

<div class="list-group list-special"> 
    <a href="#" class="list-group-item active"> 
    Cras justo odio 
    </a> 
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
    <a href="#" class="list-group-item">Morbi leo risus</a> 
    <a href="#" class="list-group-item">Porta ac consectetur ac</a> 
    <a href="#" class="list-group-item">Vestibulum at eros</a> 
</div> 

Demo: http://bootply.com/95585

DÜZENLEME: Genellikle CSS kullanmak iyi bir uygulamadır önemli değil. list-special daha fazla ayrıntı sağladığı için, !important'u kaldırabilirsiniz. Bootply'u güncelledim, böylece bunun nasıl çalıştığını görebilirsiniz.

Answer 2

Sadece içeren divunuza ekstra bir sınıf ekleyin. Sonra

<div class="list-group special"> 
    <a href="#" class="list-group-item active"> 
     Cras justo odio 
    </a> 
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
    <a href="#" class="list-group-item">Morbi leo risus</a> 
    <a href="#" class="list-group-item">Porta ac consectetur ac</a> 
    <a href="#" class="list-group-item">Vestibulum at eros</a> 
</div> 

ve

css yoluyla hedef:

.special .list-group-item:first-child { 
    border-top-right-radius: 0px !important; 
    border-top-left-radius: 0px !important; 
} 

.special .list-group-item:last-child { 
    border-bottom-right-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 
} 

DÜZENLEME: gibi bir bootply bağlantısı istediyseniz: bootply

Answer 3

.list-pers .list-group-item{border-radius: 0px !important;}