更改Angular Timepicker字体大小

Question

我正在使用angular bootstrap timepicker，但我似乎无法更改字体大小，从而切断了下面的一些文字：

HTML：

        <div class="col-md-1">
            <div class="input-group">
                <label>End:</label>
                <timepicker ng-model="filter_endtime" ng-change="changed()" hour-step="hstep" 
                    minute-step="mstep" show-meridian="ismeridian"></timepicker>
            </div>
        </div>

如果我在浏览器中检查元素，我可以将.form-control字体大小更改为12px，看起来很好。

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4285;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

无论如何我可以覆盖timepicker控件中的字体大小吗？

我已经尝试过了

font-size: 12px !important;

作为输入组中的另一个类，但它看起来像这样：

Answer 1

在bootstrap css中更改.form-control类样式。

.form-control{
font-size:12px
}

或使用内联样式

<timepicker style="font-size:12px;" ng-model="filter_endtime" ng-change="changed()" 
hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
</timepicker>

Answer 2

只需为.bootstrap-timepicker-hour和.bootstrap-timepicker-minute设置css：

bootstrap-timepicker-hour{
font-size:12px !important;
}

尝试小提琴

http://jsfiddle.net/sqe64a09/