用项目符号引导无序列表 [英] bootstrap unordered list with bullets
问题描述
如何在引导程序中显示未订购清单的项目符号.我有以下html
How do I show the bullets for an unorderlist in bootstrap. I have the following html
<body>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item border-0">
Do you need a research on your particuar ancestor or your goal is to make a family tree?
</li>
<li class="list-group-item border-0">Do you want to know how home of your ancestor looked like, if it's still there? We will provide photos!</li>
<li class="list-group-item border-0">Do you need to obtain a specific record (birth, marriage, death certificates, Census, tax, property ownership, etc)? </li>
<li class="list-group-item border-0">Do you want to find and visit your ancestral town and talk with locals to hear some family lores about your ancestors?</li>
<li class="list-group-item border-0">Do you need to find a grave, house or plot where your ancestors lived?</li>
<li class="list-group-item border-0">Do you need a guide through local archives or repositories while doing your research in Eastern Europe? </li>
<li class="list-group-item border-0">Do you want to find a living relative or missing heir for an estate?</li>
<li class="list-group-item border-0">Do you need a priceless gift for your parents, relatives or colleagues? </li>
</ul>
</div>
</div>
</body>
在我的default1.css中，我正在执行以下操作，但未显示项目符号.请帮忙.
In my default1.css I am doing the following but it doesn't show the bullets. Please help.
.list-group-item border-0 {
list-style-type: disc !important;
padding-left: 1em;
}
推荐答案
首先，您有一个错字. border-0需要在其前面加一个句点，以将其指定为类选择器，而不是像这样的元素选择器:
Firstly, you have a typo. border-0 needs a period in front of it to specify it as a class selector instead of an element selector like this:
.list-group-item .border-0 {
list-style-type: disc !important;
padding-left: 1em;
}
其次，您不需要如此大量的代码.您只需要list-group-item.试试这个:
Secondly, you don't need to be that specific with this amount of code. All you need is list-group-item. Try this:
.list-group-item::before {
content: "●";
margin-right: 0.75rem;
}
::before是伪元素，可用于将内容放在元素之前，但必须使用content: "●"属性为其提供内容.
::before is a pseudo element that you can use to put content before an element, but you have to give it content with the content: "●" property.
这篇关于用项目符号引导无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
