Bootstrap Datepicker странный размер

Question

Я использую последнюю версию (1.4) версии Bootstrap Datepicker from Eternicode на моем веб-сайте ASP.Net MVC. Функция datepicker работает нормально, но по какой-то причине, когда я нажимаю кнопку «zoom-out» месяца/года, содержимое передается в половину горизонтальной ширины раскрывающегося списка. Я никак не изменял bootstrap css или js. Я пробовал использовать версию css/js версии 1.3 с теми же результатами ...

Код, который я использую, отлично работает на этом 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

Я просто имел точно такой же вопрос, и причина в том, что я не был в том числе бутстраповское-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; 
} 

Надеется, что это помогает кому-то