如何在 Bootstrap 中覆盖主按钮的样式答案

【问题标题】：how can i overwrite the style of primary-Button in Bootstrap如何在 Bootstrap 中覆盖主按钮的样式
【发布时间】：2023-03-16 02:31:01
【问题描述】：

如果我单击单选按钮，我想更改背景颜色。

.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  color: white !important;
}

.btn-primary {
  color: black;
  background-color: white;
  width: 100%;
}

<div class="btn-group">
  <div class="radiobuttonWidth">
    <p-radioButton [somethink]="some"> </p-radioButton>
  </div>
</div>

悬停效果有效，但无效

【问题讨论】：

你能发布呈现的 HTML 而不是 p-radioButton 吗？

标签： html css angular bootstrap-4 angular6

【解决方案1】：

这对我有用。请检查您是否在引导样式导入后定义了您的 style.css，并使用 !important 覆盖引导样式。

.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  color: white !important;
}

.btn-primary {
  color: white !important;
  background-color: green !important;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group">
  <div class="radiobuttonWidth">
    <button class="btn btn-primary">Test</button>
  </div>
</div>

【讨论】：

【解决方案2】：

确保将样式表放在引导 css 样式表的上方

<!doctype>
<html>
 <head>
     <style>
               <link rel="stylesheet" href="styles.css">
             <link rel="stylesheet" href="bootstrap.css">
     </style>

然后你用“btn & btn-primary class”设置按钮的样式

   .btn-primary{
             color: white;
             background-color: red !important;
         }

【讨论】：

我想在激活时设置按钮样式