Bootstrap DateTime选取器上的小字体

时间:2015-01-14 01:06:49

标签: javascript css twitter-bootstrap datetimepicker

我正在使用www.github.com/Eonasdan/bootstrap-datetimepicker

中的Bootstrap 3 DateTime选择器

除了我需要使用小字体和日历网格线之间的间距更小外,一切都运行正常。

有没有人知道如何做到这一点。这是原始代码:

<div class="small">
    <div id="myPlaceholder"></div>
</div>

关于Javascript:

 $('#myPlaceholder').datetimepicker({
                language : 'en'
            });

效果很好,但不显示小字体。

1 个答案:

答案 0 :(得分:5)

您只需添加自己的CSS来设置日期选择器的样式。

这会使列更窄:

.bootstrap-datetimepicker-widget td.day {
    width: 200px;
}

这将使行更短:

.bootstrap-datetimepicker-widget td.day {
    line-height: 10px;
}

这使得日期字体的字体更小:

.bootstrap-datetimepicker-widget td.day {
    font-size: 10px;
}

将它们全部合并:

.bootstrap-datetimepicker-widget td.day {
    width: 200px;
    line-height: 10px;
    font-size: 10px;
}

作为奖励,这将使星期几的字体大小变小:

th.dow {
    font-size: 12px;
}