在不覆蓋全局的情況下刪除List的邊框半徑（引導3）

我正在使用Bootstrap 3創建一個小應用程序。我需要使用它們的linked list，但不想要圓角邊框。在不覆蓋全局的情況下刪除List的邊框半徑（引導3）

從CSS文件，他們使用以下命令：

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

目前，我使用覆蓋類以下內容：

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

這樣做的問題是，這使得所有列表我已經沒有邊界。有沒有一種方法可以覆蓋我使用它的單個實例？

下面是引導上如何使用這個例子（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>

來源

2013-11-20 TheAJ

其簡單|創建一個父類並將其指向子類，它將爲父類使用指定的元素進行覆蓋，如'.parent> .list-group-item {color：blue;}' – user2304394

你可以爲你list-group如list-special添加一類特殊的名字嗎？然後使用...

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>

演示：http://bootply.com/95585

編輯：這通常不是好的做法是使用CSS重要！由於list-special提供更多特異性，因此可以刪除!important。我更新了Bootply，以便您可以看到這是如何工作的。

來源

2013-11-20 20:10:08 ZimSystem

只需在您的包含div中添加額外的類。

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

，然後通過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; 
}

編輯：作爲請求bootply鏈接：bootply

來源

2013-11-20 20:13:19 Sebsemillia

你的答案是迄今爲止最好的，爲它做... jsfiddle ... – user2304394

快速fyi：這繼續工作與引導4（阿爾法），只是包裝你的'

'在div。 – Abela

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

來源

2014-09-13 11:54:51

在不覆蓋全局的情況下刪除List的邊框半徑（引導3）

回答

相關問題