Как я могу изменить цвет кнопки Bootstrap по умолчанию на свой собственный выбор цвета с помощью CSS?

Question

.nav-link {
  font-family: "Montserrat";
  font-weight: 300;
  font-size: 1.2rem;
  color: #ededed;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<li class="nav-item">
  <a class="nav-link" href="#about">about</a>
</li>

Все остальные элементы в части css работают, кроме элемента color. Когда я проверял веб-страницу в chrome инструменте разработчика, он показал, что css не переопределяет стандартный цвет кнопки bootstrap (rgba).

Answer 1

Сначала добавьте новый класс к вашему элементу, затем переписывайте стили bootstrap, используя important

.nav-link {
  font-family: "Montserrat";
  font-weight: 300;
  font-size: 1.2rem;
  color: #ededed;
}
.new-class{
/* over write */
color:red !important;
font-size:30px !important;
/* etc */
}
.new-class:hover{
    color:#000 !important;
    
}
.il-style
{
	list-style:none !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<li class="nav-item il-style">
  <a class="nav-link new-class" href="#about">about</a>
</li>

• Или вы можете позвонить вашему style.css после bootstrap стиля без использования important, но иногда вам нужно использовать это.