2017-01-19 2 views
0

Я использую следующий код, и он сжимает каждую строку, а также по умолчанию по умолчанию теряется общий интерфейс. Хоу, я могу это исправить?bootstrap с 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> 
+0

Пожалуйста, добавьте Fiddle для этого и воспроизведите там вопрос –

+0

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

+0

Источники скрипки не загружаются. И у вас есть два сценария с bootstrap.min.js, может быть, это проблема – Roy

ответ

0

Много проблем здесь, мой друг:

  1. Загрузка нескольких версий Bootstrap
  2. Загрузка JQuery после по крайней мере один бутстрапе js файл
  3. По крайней мере, в скрипку, загружая над http в отличие от https
  4. datetimepicker, который вы пытаетесь использовать, несовместим с bootstrap 3 и есть no longer maintained.
  5. В вашем html содержатся классы как из старых, так и из новых версий бутстрапа.

Here's a somewhat fixed version of your fiddle, но не ожидайте, что он действительно работает так, как вы этого хотели.

+0

Hi Serg. Можете ли вы предложить какой-нибудь выбор времени, кроме той, которую я использую с загрузкой? Это будет очень полезно. Спасибо :) – jason

+0

Я не могу порекомендовать из личного опыта, но я могу рассказать вам, как его выбрать. Посмотрите на страницы GitHub для любого подключаемого модуля и убедитесь, что ничто не говорит о том, что плагин больше не поддерживается. Кроме того, при сравнении двух плагинов посмотрите на что-то вроде количества звезд, каждое из которых имеет на github. Это покажет вам определенную популярность, и вы хотите использовать то, что имеет большее сообщество. Например: https://github.com/Eonasdan/bootstrap-datetimepicker –

+0

Не могли бы вы показать, как я могу использовать то же самое с jsfiddle. Я очень ценю вашу помощь :) – jason

Смежные вопросы