带有日期时间选择器的引导程序看起来不正常+工作正常答案

【问题标题】：bootstrap with datetime picker is not looking+working properly带有日期时间选择器的引导程序看起来不正常+工作正常
【发布时间】：2017-01-19 10:48:41
【问题描述】：

我正在使用以下代码，它会缩小每一行，并且由于某种原因，整体 UI 也会丢失。我该如何解决？

<!DOCTYPE HTML>
<html>
<head>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
          href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>


</head>
<body>


<div class="container-fluid">

    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-12">


                <div id="datetimepicker" class="input-append date">
                    <input type="text"></input>
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                </div>
            </div>

        </div>

    </div>


    <div class="row">
        <div class="col-xs-12 col-sm-12">
            <input id="text" placeholder="text" type="text" class="form-control"
                   required="true">
        </div>

    </div>




</div>

<script type="text/javascript">
    $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
    });
</script>
</body>
<html>

【问题讨论】：

请为其添加 Fiddle 并在那里重现问题
jsfiddle.net/4kk7e77z
小提琴的源没有加载。而且你有两个带有 bootstrap.min.js 的脚本，也许这就是问题所在
你能帮我解决一下吗？我应该删除哪一个？
我尝试删除两个 bootstrap.min.js 但问题仍然存在

标签： html css twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

这里有很多问题，我的朋友：

加载多个版本的 Bootstrap
在至少一个引导 js 文件后加载 jQuery
至少在小提琴中，加载超过 http 而不是 https
您尝试使用的 datetimepicker 与 bootstrap 3 不兼容，并且是 no longer maintained。
您的 html 包含来自新旧版本引导程序的类。

Here's a somewhat fixed version of your fiddle，但不要指望它会按您的意愿实际工作。

【讨论】：

嗨，军士。除了我在 bootstrap 中使用的那个之外，你能推荐任何日期时间选择器吗？会有很大帮助的。谢谢:)
我无法从个人经验中推荐，但我可以告诉你如何选择。查看您找到的任何插件的 GitHub 页面，并确保没有任何内容表明该插件不再维护。此外，在比较两个插件时，请查看每个插件在 github 上的星数。这将显示您的受欢迎程度，并且您希望使用拥有更大社区的任何东西。例如：github.com/Eonasdan/bootstrap-datetimepicker
你能告诉我如何在 jsfiddle 中使用它。非常感谢您的帮助:)