AngularJS：CSS似乎对HTML

Question

我有一个AngularJS应用程序，在其中一个页面上，我显示了许多小部件。小部件都有一个工具栏，显示小部件的名称，以及一些按钮（不同的按钮取决于小部件）。

小工具工具栏上的按钮当前正紧挨着显示：

我想在工具栏中添加一些“填充”，以便按钮之间有一点间距。

Bootstrap已经在app中用于元素布局/表示的其他方面，所以我想用它来改进widget工具栏上按钮的布局。

我尝试将padding属性添加到CSS文件中显示按钮的面板中：

.widget-preview .panel-heading .pull-right {
  display: none;
  padding-left: 5px; /* added this line to try and sort the spacing between buttons on widget heading */
  padding-right: 5px; /* added this line to try and sort the spacing between buttons on widget heading */
}

/* Overlaid edit panel on previewed widget */
.widget-preview-edit-panel {
  top: 0;
  left: 0;
  width: 100%;

  // Align with panel-heading height
  height: 38px;

  color: #ddd;
  font-size: 20px;
  text-align: right;
  position: absolute;

  padding-right: 5px; /* added this line to try and sort the spacing between buttons on widget heading */
  padding-left: 5px; /* added this line to try and sort the spacing between buttons on widget heading */

  span {
    padding-right: 10px;
    vertical-align: bottom;
  }
}

然后将directive.js模板中使用的两个图像的class设置为CSS中定义的class：

'<i data-ng-hide="hideChartPageBtn" class="pull-right glyphicon-clickable ti-bar-chart" data-ng-click="chartPage()" ></i>' +
'<i class="pull-right ti-home" data-ng-click="goHomePage()" ng-show="customhomepage"  /> ' +

但由于某些原因，这实际上并没有对图像的显示方式产生影响 - 它们之间没有明显的“填充”/空间......

这是为什么？如何确保我添加的CSS实际应用于这些按钮？