自定义 Angular Bootstrap 日期选择器弹出按钮答案

【问题标题】：Customize Angular Bootstrap datepicker popup buttons自定义 Angular Bootstrap 日期选择器弹出按钮
【发布时间】：2019-05-11 07:24:04
【问题描述】：

我想自定义 Angular Bootstrap 日期选择器弹出窗口中的默认按钮。目前我有
我想要的是蓝色和绿色按钮之间大约 1（或 2）px 的空间。绿色按钮应保持不变（明智和大小之间的空间）。

目前，有很多代码，我不知道 CSS 文件的位置。此外，对于项目中的所有代码，都在观察相同的事情，并且必须针对所有此类发生的情况进行更改。我试图在bootstrap\less\button-group.less 文件中进行更改：

.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: 1px;
  }
}

.btn-group-vertical {
  > .btn,
  > .btn-group,
  > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
  }

  // Clear floats so dropdown menus can be properly placed
  > .btn-group {
    &:extend(.clearfix all);
    > .btn {
      float: none;
    }
  }

  > .btn + .btn,
  > .btn + .btn-group,
  > .btn-group + .btn,
  > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 1px;
  }
}

在bootstrap\distcss\bootstrap.css

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: 1px;
}

但是什么也没发生。渲染仍然发生在 -1px 的左边距。

我该如何解决这个问题？

【问题讨论】：

也许你知道这一点，但你不应该修改库的文件。对于 css/less，您可以轻松地从您自己的文件中覆盖样式。只需使用相同的选择器（例如.btn-group .btn + .btn { ...}）。您的文件通常在库文件之后加载，因此它会自动覆盖原始版本。
要找出它不工作的原因，请检查浏览器中的元素（通常快捷键是 CTRL-SHIFT-i）。然后，在样式检查器中，您可以检查给定元素考虑了哪些样式以及实际应用了哪些样式。（更多信息developers.google.com/web/tools/chrome-devtools/inspect-styles）
@johey 我看到在检查器中，我更改的属性没有反映回来

标签： html css angular twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

模板可以在github repo找到，具体的Datepicker-Popup模板可以find here.

您可以复制它并制作自己的自定义副本，并使用datepicker-template-url 属性将其链接到指令

我建议只在您的自定义模板上嵌入边距 css 样式并完成它

【讨论】：