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

Question

我想自定义 Angular Bootstrap 日期选择器弹出窗口中的默认按钮。目前我有
我想要的是蓝色和绿色按钮之间大约 1（或 2）像素的 space。绿色按钮应该保持不变（space 在 wise 和 size wise 之间）。

目前有很多代码，我不知道 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 的左边距。

我该如何解决这个问题？

Answer 1

您可以在 github 存储库中找到模板，您可以 find here.

找到 Datepicker-Popup 的特定模板

您可以复制它并制作您自己的自定义副本，然后 link 使用 datepicker-template-url 属性

将其添加到指令中

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

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

Customize Angular Bootstrap datepicker popup buttons

html

css

twitter-bootstrap

angular-ui-bootstrap

angular