Блог

Главная - Вопросы по программированию - загрузочный неупорядоченный список с маркерами

загрузочный неупорядоченный список с маркерами

#html #css #twitter-bootstrap #html-lists

#HTML #css #twitter-bootstrap #html-списки

Вопрос:

Как мне показать маркеры для unorderlist в 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;
}

Ответ №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: "●" свойством.