Question

我正在使用以下代码，它会缩小每一行，并且由于某种原因整个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>

Answer 1

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

加载多个版本的Bootstrap
在至少一个bootstrap js文件
至少在小提琴中，加载http而不是https
您尝试使用的datetimepicker与bootstrap 3不兼容且为no longer maintained。
你的html包含来自bootstrap的新版本和新版本的类。

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

带有日期时间选择器的bootstrap看起来不正常+正常工作

1 个答案: