datetime pickerが+正常に動作していないブートストラップ

次のコードを使用していますが、各行が縮小され、何らかの理由で全体のUIが失われます。私はそれを修正できますか？datetime pickerが+正常に動作していないブートストラップ

<!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>

出典

2017-01-19 jason

フィドルを追加して問題を再現してください –

https://jsfiddle.net/4kk7e77z/ – jason

フィドルのソースが読み込まれていません。あなたはbootstrap.min.jsを持つ2つのスクリプトを持っていますが、それはおそらく問題です – Roy

多くの問題ここでは、私の友人：

ロードjQueryの少なくとも一つのブートストラップ少なくともフィドルでjsファイル
後にブートストラップの複数のバージョンをロードするには、オーバーロードhttpはhttps
datetimepickerあなたが使用しようとしているとは対照的に、ブートストラップ3との互換性はありませんno longer maintainedです。
ブートストラップの古いバージョンと新しいバージョンの両方からのHTMLを含むクラス。

Here's a somewhat fixed version of your fiddleですが、実際には望み通りに動作するとは思われません。

出典

2017-01-19 14:43:00

こんにちはSerg。あなたはブートストラップで使用しているもの以外のdatetime pickerを提案できますか？それは大きな助けになるでしょう。ありがとう:) – jason

私は個人的な経験から推薦することはできませんが、私はどのように1つを選択するかを伝えることができます。あなたが見つけたプラグインのGitHubページを見て、プラグインがもはや維持されていないことを何も示さないようにしてください。また、2つのプラグインを比較すると、それぞれがgithubにある星の数のようなものが見えます。それはあなたに人気の尺度を示し、より大きなコミュニティを持つものを使用したいと考えています。例：https://github.com/Eonasdan/bootstrap-datetimepicker –

jsfiddleでどのように使うことができますか？私は本当にあなたの助けに感謝:) – jason

datetime pickerが+正常に動作していないブートストラップ

答えて

関連する問題