如何获得此图片中的Bootstrap 3 Datepicker？

Question

在Bootstrap 3中使用http://eternicode.github.io/bootstrap-datepicker时出现显示问题。 如何在这张照片中获得datepicker？

我将MVC 5与自动生成的视图结合使用 Create.cshtml

<div class="form-group">
    @Html.LabelFor(model => model.TerminateDate, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="input-group date" id="dp3">
            @Html.EditorFor(model => model.TerminateDate, new { htmlAttributes = new { @class = "form-control datepicker", @readonly = "readonly" } })
            <span class="btn btn-default input-group-addon">
                <i class="glyphicon glyphicon-calendar"></i>
            </span>
            @Html.ValidationMessageFor(model => model.TerminateDate)
        </div>
    </div>
</div>

更新： 现在它看起来更好但有点长，如何设置长度？

<div class="form-group">
    @Html.LabelFor(model => model.TerminateDate, new { @class = "control-label col-md-2" })
        <div class="col-md-4">
            <div class="input-group date">
                @Html.EditorFor(model => model.TerminateDate, new { htmlAttributes = new { @class = "form-control date", @readonly = "readonly" } })
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                @Html.ValidationMessageFor(model => model.TerminateDate)
            </div>
        </div>
    </div>

Answer 1

希望这会有所帮助。我刚刚添加了一些类并更改了一些标记。它看起来像this

<div class="form-group">
  @Html.LabelFor(model => model.TerminateDate, new { @class = "control-label col-md-2" })
  <div class="input-group col-md-10">
    <input type="text" class="form-control input-group date" id="dp3">
    @Html.EditorFor(model => model.TerminateDate, new { htmlAttributes = new { @class = "form-control datepicker", @readonly = "readonly" } })
      <span class="btn btn-default input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    @Html.ValidationMessageFor(model => model.TerminateDate)
  </div>
</div>

更新：请查看“列大小调整”小节here

Answer 2

尝试遵循以下格式：

<div id="datetimepicker1" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar">
        </i>
    </span>
</div>

Answer 3

创建新项目时创建的默认site.css在输入元素上设置了最大宽度：

data-tab='1'

删除或评论此内容，您的col-md-10将完美无缺。