bootstrap 带项目符号的无序列表

Question

如何在 bootstrap 中显示无序列表的项目符号。我有以下 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;
}

Answer 1

首先，你打错了。 border-0 需要在它前面加一个句点，以将其指定为 class 选择器，而不是像这样的元素选择器：

.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: "●" 属性.

给它内容

bootstrap 带项目符号的无序列表

bootstrap unordered list with bullets

html

css

html-lists

twitter-bootstrap