twitter-bootstrap 删除列表的边框半径而不全局覆盖（引导程序 3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20105818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove border radius of List without overriding globally (Bootstrap 3)
提问by TheAJ
I am using Bootstrap 3 to create a small application. I need to use their linked listbut do not want the rounded borders.
我正在使用 Bootstrap 3 创建一个小应用程序。我需要使用他们的链表但不想要圆角边框。
From the CSS file, they use the following:
从 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;
}
At the moment, i override the classes using the following:
目前，我使用以下方法覆盖类：
.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;
}
The problem with this is that this makes all lists I have render no borders. Is there a way to override for just this single instance that I use it?
问题在于这使得我拥有的所有列表都没有边框。有没有办法覆盖我使用它的单个实例？
Here's an example from bootstrap on how to use this (http://getbootstrap.com/components/#list-group-linked):
这是引导程序中有关如何使用它的示例（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>
回答by Zim
Can you add a special class name for your list-groupsuch as list-special? Then use...
你能为你的list-group诸如添加一个特殊的类名list-special吗？然后用...
CSS
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
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: It's generally not good practice to use CSS !important. Since the list-specialprovides more specificity, you can remove the !important. I updated the Bootply so that you can see how this works.
编辑：使用 CSS !important 通常不是一个好习惯。由于list-special提供了更多的特异性，您可以删除!important. 我更新了 Bootply 以便您可以看到它是如何工作的。
回答by Sebsemillia
Just add an extra class to your containing div.
只需向包含的 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>
and then target it via css:
然后通过 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: As requested a bootply link: bootply
编辑：根据要求提供一个 bootply 链接：bootply
回答by AKID Ahmed
.list-pers .list-group-item{border-radius: 0px !important;}
