Bootstrap Datepicker奇怪的大小

Question

我在ASP.Net MVC网站上使用Bootstrap Datepicker from Eternicode的最新版本（1.4）。 datepicker工作正常，但出于某种原因，当我点击月/年＆＃34;缩小＆＃34;按钮，内容被压缩到下拉列表的水平宽度的一半。我没有以任何方式修改bootstrap css或js。我已尝试使用1.3版本的css / js，结果相同......

我使用的代码在此jsfiddle上运行正常，但在我的本地环境中无效。

HTML

<input id="datepicker" type="text" type="text" class="form-control datepicker input-sm" />

JS

$('#datepicker').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    daysOfWeekDisabled: '0,6',
    todayHighlight: true,
    orientation: 'auto'
});

违规元素似乎是<table class="table-condensed">，只跨越下拉列表的一半，而父datepicker-months div标记跨越下拉列表的整个宽度。对于datepicker-days，我无法看到代码中的任何差异，但它运行正常。 datepicker-years遇到与datepicker-months

相同的问题

Answer 1

我刚才遇到了完全相同的问题，原因是我没有在我遇到此问题的页面中包含bootstrap-datetimepicker.css。

包含它之后，月份和年份的观点看起来很正常。

Answer 2

只需添加css：

.datepicker table tr td span {
     width: 100% !important;
}

您还可以使用其他width，但100%是desctop网站的最佳方式。

Answer 3

我遇到同样的问题，发现宽度设置为30px的样式如下

.datepicker table tr td, .datepicker table tr th{
    text-align:center;
    width:30px;
    height:30px;
    border-radius:4px;
    border:none
}

从上方移除宽度并添加以下css对我有效（白天，月和年列的宽度不同）

.datepicker table tr td.year,.datepicker table tr th.year{
    width:90px;
}
.datepicker table tr td.month,.datepicker table tr th.month{
    width:60px;
}
.datepicker table tr td.day,.datepicker table tr th.day{
    width:30px;
}

希望这有助于某人

Answer 4

我也有完全相同的问题。但是最终结果是我的样式表中有一个像下面这样的类-

table,td{  ../ some styles /..}

删除与此日期选择器类重叠的table,td{ ..}类。