Bootstrap Datepicker 奇怪的大小答案

【问题标题】：Bootstrap Datepicker strange sizingBootstrap Datepicker 奇怪的大小
【发布时间】：2015-08-27 17:58:58
【问题描述】：

我在我的 ASP.Net MVC 网站上使用最新 (1.4) 版本的 Bootstrap Datepicker from Eternicode。日期选择器工作正常，但由于某种原因，当我单击月/年“缩小”按钮时，内容被压缩成下拉菜单水平宽度的一半。我没有以任何方式修改引导 css 或 js。我已经尝试使用 1.3 版本的 css/js 并获得相同的结果...

我使用的代码在 jsfiddle 上运行良好，但在我的本地环境中却不行。

HTML

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

$('#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 遇到同样的问题

【问题讨论】：

根据您提供的信息，我最好的猜测是您的样式正在某处被您的 CSS 覆盖。也许有一个插件，或者以其他方式链接的 CSS 文件。为什么不尝试使用Web Inspector 或Firebug 来找出影响它的样式以及它的来源。我无法调试它，因为该问题无法在您的开发环境之外复制。
@Mastrianni 使用相关元素的 Web Inspector 视图更新了问题。我看不到任何突出的东西，也许需要一双新鲜的眼睛......

标签： css twitter-bootstrap datepicker

【解决方案1】：

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

添加后，月和年的视图看起来正常。

【讨论】：

意思是我需要明确包含这些页面的css？我使用 _Layout.cshtml 来包含我所有的 css 资源，这可以很好地呈现所有其他元素。

【解决方案2】：

只需添加css：

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

您也可以使用另一个width，但100% 是描述网站的最佳方式。

【讨论】：

【解决方案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;
}

希望这对某人有所帮助

【讨论】：

【解决方案4】：

我也遇到了同样的问题。但最终结果是我的样式表中有一个如下所示的类-

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

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

【讨论】：