Xóa bán kính đường viền của Danh sách mà không ghi đè toàn cầu (Bootstrap 3)

Question

Tôi đang sử dụng Bootstrap 3 để tạo một ứng dụng nhỏ. Tôi cần phải sử dụng linked list của họ nhưng không muốn các đường viền tròn.

Từ các tập tin CSS, họ sử dụng như sau:

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

Tại thời điểm này, tôi ghi đè lên các lớp học sử dụng như sau:

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

Vấn đề với điều này là điều này làm cho tất cả danh sách Tôi đã không hiển thị đường viền. Có cách nào để ghi đè lên chỉ cho trường hợp duy nhất này mà tôi sử dụng nó?

Dưới đây là một ví dụ từ bootstrap về cách sử dụng này (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

Bạn có thể thêm một tên lớp đặc biệt dành cho list-group như list-special? Sau đó sử dụng ...

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

<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

EDIT: Đó là nói chung không thực hành tốt để sử dụng CSS quan trọng!. Vì số list-special cung cấp thêm độ đặc hiệu, bạn có thể xóa !important. Tôi đã cập nhật Bootply để bạn có thể xem cách hoạt động của nó.

Answer 2

Chỉ cần thêm một lớp bổ sung vào div chứa của bạn.

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

và sau đó nhắm vào nó thông qua css:

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

EDIT: Theo yêu cầu một liên kết bootply: bootply

Answer 3

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