带项目符号的引导无序列表答案

【问题标题】：bootstrap unordered list with bullets带项目符号的引导无序列表
【发布时间】：2020-10-12 07:28:08
【问题描述】：

如何在引导程序中显示无序列表的项目符号。我有以下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 中，我正在执行以下操作，但它没有显示项目符号。请帮忙。

.list-group-item border-0 {
    list-style-type: disc !important;
    padding-left: 1em;
}

【问题讨论】：

标签： html css twitter-bootstrap html-lists

【解决方案1】：

首先，你有一个错字。 border-0 前面需要一个句点来指定它为类选择器，而不是像这样的元素选择器：

.list-group-item .border-0 {
  list-style-type: disc !important;
  padding-left: 1em;
}

其次，你不需要对这么多代码那么具体。您只需要list-group-item。试试这个：

.list-group-item::before {
  content: "●";
  margin-right: 0.75rem;
}

::before 是一个伪元素，您可以使用它在元素之前放置内容，但您必须使用 content: "●" 属性为其提供内容。

【讨论】：