css - 更改 Angular Timepicker 字体大小

Question

我正在使用角度引导时间选择器，但我似乎无法更改字体大小，这会截断如下一些文本：

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;
}

无论如何我可以覆盖时间选择器控件中的字体大小吗？

我试过做

font-size: 12px !important;

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

Answer 1

在引导 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/