样式 bootstrap table 按钮 - btn-primary dropdown-toggle

Question

我怎样才能完全设置 bootstrap table 按钮的样式，目前按钮保持蓝色并且悬停在我的 table 按钮上只会使按钮的一半成为我想要的颜色，我会就像黑色按钮 (#282828)，然后在悬停或激活时稍微变亮。

问题底部的 JSFiddle

我的table是由javascript生成的

 function bootstrapTableStateHandler(origin, msg, type) {
    console[type]("[bootstrapTable." + origin + "]", msg)
}
 var $table = $('#results');
         $table.bootstrapTable({
              url: 'getresults.php',
              search: true,
              buttonsClass: 'primary',
              showFooter: false,
              minimumCountColumns: 2,
              columns: [{
                  field: 'results',
                  title: 'results',
                  sortable: true,
              }, ....So on and so forth

并且在 table

中由此打开了下拉菜单

<table id="results" data-show-columns="true" data-show-toggle="true"></table>

我尝试使用下面的 CSS 设置所有内容的样式，但按钮仍然是蓝色，当我将鼠标悬停在它上面时，只有一半按钮变黑了 - 虽然轮廓确实变黑了 - 非常抱歉 CSS

.btn-primary { 
  color: #ffffff !important; 
  background-color: #282828 !important; 
  border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #1F1B1B; 
  border-color: #282828 !important; 
} 

.btn-primary .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}
.dropdown-toggle { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  background-image: none; 
} 

.dropdown-toggle.disabled, 
.dropdown-toggle[disabled], 
fieldset[disabled] .dropdown-toggle, 
.dropdown-toggle.disabled:hover, 
.dropdown-toggle[disabled]:hover, 
fieldset[disabled] .dropdown-toggle:hover, 
.dropdown-toggle.disabled:focus, 
.dropdown-toggle[disabled]:focus, 
fieldset[disabled] .dropdown-toggle:focus, 
.dropdown-toggle.disabled:active, 
.dropdown-toggle[disabled]:active, 
fieldset[disabled] .dropdown-toggle:active, 
.dropdown-toggle.disabled.active, 
.dropdown-toggle[disabled].active, 
fieldset[disabled] .dropdown-toggle.active { 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.dropdown-toggle .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}

我需要什么样式来强制 table 按钮为黑色 (#282828) 查看页面的输出，检查时的按钮称为 btn btn-primary dropdown-toggle

谢谢

JSfiddle

Answer 1

如果您使用 background 而不是 background-color，您应该能够覆盖这些设置。这是因为这些 bootstrap 使用线性渐变，它是背景图像，将位于顶部。所以你需要覆盖这个属性才能看到你的颜色。您也可以使用 background-image: none 和 background-color: #282828，但仅使用 background: #282828 即可完成工作，而且管理起来更轻松。

https://jsfiddle.net/bonez0607/0qkubms6/

.btn-primary { 
  color: #ffffff !important; 
  background: #282828; 
  border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #ffffff; 
  background: #484848; 
  border-color: #282828 !important; 
} 

.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #1F1B1B; 
  border-color: #282828; 
} 

.btn-primary .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}
.dropdown-toggle { 
  color: #ffffff; 
  background: #282828; 
  border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  color: #ffffff; 
  background: #484848; 
  border-color: #282828 !important; 
}

Answer 2

我已尝试重现该问题。我想出了这个代码：https://jsfiddle.net/gemkzwva/。它解释了代码中发生的事情。

<button></button>
<button id="fixed"></button>

button{
  height: 50px;
  width: 100px;
  background-image: linear-gradient(red, blue);/*bootstrap-theme behaviour*/
}
button:hover{
  background-position: 0 25px;/*bootstrap-theme behaviour*/
}
#fixed:hover{
  background-position: 0; /*override background-position */
  background-image: none; /*remove the bootstrap-theme image/linear-gradient*/
  background-color: green;
}

background-image 和 background-position 的行为由 bootstrap-theme.min.css 文件中的 .btn-primary class 触发。所以你可以：

删除那个主题。
进行适当的覆盖。
删除 btn-primary class 并在您自己的代码中创建一个自定义按钮。

样式 bootstrap table 按钮 - btn-primary dropdown-toggle

Style bootstrap table buttons - btn-primary dropdown-toggle

css

button

twitter-bootstrap

bootstrap-table