引导程序中模态的动态大小

Question

我是该领域的新手，因此我将向您解释我要达到的目标。 在我的网页中，我希望按下按钮时，弹出卡显示在我必须填写一些信息的地方。 我在当前项目中使用引导程序。 因此，到目前为止，我发现是使用模态。 因此，当卡片弹出时，会有一些字段要填写（简单的字符串）和日期可供选择。 通过到目前为止的代码，我得到了：

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btn-warning addButton" data-toggle="modal" data-target="#myModal">New Employee</button>
 <!-- Modal -->
 <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">New FRISS employee</h4>
                </div>
                <div class="modal-body">

                    <input type="text" class="form-control insertInfo" placeholder="Name" />
                    <input type="text" class="form-control insertInfo" placeholder="Surname" />
                    <input type="text" class="form-control insertInfo" placeholder="Date of birth" />
                    <input type="text" class="form-control insertInfo" placeholder="Role" />
                    <input type="text" class="form-control insertInfo" placeholder="Email address" />



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

此时的第一个问题是，我想修改模态的宽度（太大）。 之后，我不希望将字符串作为日期，而是将日期选择器用作日期，然后再次通过引导程序找到了以下代码片段：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

不幸的是，如果我使用它，则模态中的所有内容都会混合在一起，而不再需要任何命令，并且我无法保持所有内容的整洁有序。 你能帮我么？ 提前致谢

Answer 1

您可能没有在datepicker css cdn链接中添加任何内容，或者我认为您是在复制和粘贴整个datepicker代码以代替出生日期输入。

您不需要使用容器div复制整个代码，只需复制容器中的代码即可。

<div class='input-group date' id='datetimepicker1'>

还要确保已在head标签中添加了datetimepicker css和js文件链接。

这是使用您的代码的示例。 请检查顶部的链接和脚本标记，并以完全相同的顺序将它们放入代码中。

http://codepen.io/Nasir_T/pen/ALNkaK

还可以自定义模态div的宽度。 只需在自定义css文件或此页面中添加默认的bootstrap .modal-content {类，然后添加width属性即可对其进行自定义。

希望这可以帮助。

[编辑]

在您的间距请求中添加注释：您需要做的是拾取每个控件的整个容器，并在其顶部和底部仅应用边距。 在这种情况下，您已经在输入中添加了insertInfo类，因此只需在css文件中添加以下类。

.insertInfo {
  margin: 10px 0;
}

还要在模态代码中的datepicker div中添加此类，因为它与输入是分开的，我们需要应用到整个datetimepicker行，而不只是应用于其中的输入，因此

<div class='input-group date insertInfo' id='datetimepicker1'>

我还更新了Codepen链接，以便您可以检查它在那儿的运行情况。 快乐的编码:)

Answer 2

只需将id =“ datetimepicker1”添加到您的输入字段

并在页面末尾添加此Java脚本代码

<script>
$(document).ready(function () { 
    $('#datetimepicker1').datetimepicker(
    { 
            autoclose: true,
            //startDate : today,
            //endDate:today,
            format: "mm-dd-yyyy",
            minView:2
     })
        .on('click', function (e) {  
             setTimeout(function () {
                 $('#datetimepicker1').focus();
             }, 10);
        });           
})
</script>