Question

我是CSS / bootstrap学习者，如果这是一个无意义的问题，请原谅我.... 我在屏幕上有一个按钮＆＃34; btn-btn-outline-primary＆＃34;应用

在我的组件（Angular2）中发生某些事件后，我应用了我的＆＃34;按钮 - 隐形＆＃34; class，将显示设置为＆＃34; none＆＃34;但这并没有发生。按钮仍然可见。当我检查开发工具时，我看到该类已应用（我可以更改其他样式属性，如font-style等...）但是＆＃34; display：none;＆＃34;没有启用，它已被击穿。

有人可以建议为什么我的课程会被应用但某些方面/属性会被覆盖吗？我可以通过添加！important规则来实现此类函数的唯一方法。

干杯

.btn来自bootstrap _buttons.scss

.btn {
  display: inline-block;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
  @include transition($btn-transition);

  // Share hover and focus styles
  @include hover-focus {
    text-decoration: none;
  }
  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    cursor: $cursor-disabled;
    opacity: .65;
    @include box-shadow(none);
  }

  &:active,
  &.active {
    background-image: none;
    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  }
}

我的课程，我正在使用ngClass ...

有条件地申请

.add-button-invisible {
    display: none !important;
}

标记应用类的位置：

  <div class="row">
    <button [ngClass]="addingNew === true ? 'add-button-invisible' : 'add-button-visible'" class="btn btn-outline-primary" (click)="addNew()">+Add {{entityType}}</button>
  </div>

Answer 1

Bootstrap具有更高的优先级，因此您的样式无法正常工作。您可以将!important添加到规则中以覆盖引导规则。例如：display: block!important;

Answer 2

你可以尝试添加：！在它背后很重要，也许calss不够具体，通过添加重要的css使它更重要。：）

Answer 3

btn班级有display:inline-block，它会覆盖您的自定义班级display:none。如果您的自定义类仅适用于display: none;，那么您可以使用引导类hidden而不是自定义类。请查看以下代码段以供参考。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <button type="button" class="btn">Button Show</button>
 <button type="button" class="btn hidden">Button Hidden</button>

为什么我的类被bootstrap btn覆盖

3 个答案: