Форма бутстрапа не реагирует

-1

Я создаю форму входа в bootstrap.I думаю, что код в html и css - это нормально. Единственная проблема заключается в том, что эта форма не реагирует на события, хотя я интродуцировал строки и столбцы бутстрапа, чтобы сделать его отзывчивым.Форма бутстрапа не реагирует

Код:

.contain { 
 
    border: 1px solid; 
 
    border-color: #e6e6e6; 
 
    background-color: #f2f2f2; 
 
    height: 1000px; 
 
    margin-left: 100px; 
 
    border-radius: none; 
 
    width: 1050px; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
<div class=" contain"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body panelo"> 
 
     <div class="client"><b>SEI GIÀ CLIENTE? ACCEDI </b> 
 
     </div> 
 
     <form> 
 
      <div class="row"> 
 
      <div class="col-md-3 col-sm-3"></div> 
 
      <div class="col-md-6 col-sm-6 labelField"> 
 
       <div class="row"> 
 
       <div class="col-md-4 col-sm-4 labelField"> 
 
        <strong><br>EMAIL</strong> 
 
       </div> 
 
       <div class="col-md-8 col-sm-8"> 
 
        <input class="ut" type="mail"> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3 col-sm-3"></div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-md-3 col-sm-3"></div> 
 
      <div class="col-md-6 col-sm-6 labelField"> 
 
       <div class="row"> 
 
       <div class="col-md-4 col-sm-4 labelField"> 
 
        <strong><br>PASSWORD</strong> 
 
       </div> 
 
       <div class="col-md-8 col-sm-8"> 
 
        <input class="ut" type="mail"> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3 col-sm-3"></div> 
 
      </div> 
 
     </form> 
 
     <div class="row"> 
 
      <div class="col-md-12 col-sm-12 pass "><a href="#"> Hai dimenticato la password?</a> 
 
      </div> 
 
     </div> 
 
     <img src="images/entra.png" class=" registrati img-responsive"> 
 

 
     <img src="images/fb.png" class="registrati img-responsive"> 
 

 
     <div class="divider"> 
 
     </div> 
 
     <div class="client"><b>NON ANCORA CLIENTE? </b> 
 
     </div> 
 
     <div class="benvenuto "><b> BENVENUTO! </b> 
 
      <a href="registration.html"> 
 
      <img class="add1" src="images/Capture.png" class="img-responsive"><span class="creare"> Crea il tuo account su motogm e prosegue con il tuo ordine</span> 
 
      </a> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div>

Есть ли что-то я должен изменить, чтобы сделать это реагировать? Спасибо!

источник

2016-08-12 Elda Backa

... был бы предпочтителен ** минимальный ** демо. –

Проверьте правописание. У вас есть класс = "содержать", он должен быть class = "container" – nmg49

@ nmg49, если это причина, то этот вопрос является простой типографской ошибкой со стороны пользователя и должен быть закрыт. – Martin

Таким образом, есть много вещей, которые отсутствуют здесь:

Во-первых, HTML это плохо структурирована и не содержит какой-либо тег тела, и вы не закрывая голову тег. Вы не включили bootstrap.css либо, и это не будет работать таким образом ...

Как кто-то указал вам следует использовать либо container или container-fluid, вместо пользовательского класса contain. И как предложение, вы не должны устанавливать фиксированную ширину для своих классов, потому что bootstrap работает с шириной процента.

Это рабочий отрывок, который реагирует. Я удалил некоторые части вашего html, чтобы сделать код более понятным.

<html><head> 
 
    <!-- Latest compiled and minified CSS --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

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

 
</head> 
 
<body style=" 
 
    /* width: 100%; */ 
 
"> 
 
<div class="container"> 
 
    <form class="form-horizontal"> 
 
     <fieldset> 
 
       <div class="form-group"> 
 
        <label class="col-xs-12 col-sm-6 col-md-6 control-label" for="email">Email</label> 
 
        <div class="col-xs-12 col-sm-6 col-md-6"> 
 
         <input class="form-control" type="email" id="email" name="email"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="col-xs-12 col-sm-6 col-md-6 control-label" for="password">Password</label> 
 
        <div class="col-xs-12 col-sm-6 col-md-6"> 
 
         <input class="form-control" type="password" id="password" name="password"> 
 
        </div> 
 
       </div> 
 
      </fieldset></form></div> 
 
     
 
    
 

 

 

 
</body></html>

источник

2016-08-12 15:55:56 raven

Попробуйте изменить DIV класс = «содержит» для Div класс = „контейнер“, это должно быть первое, что нужно проверить :)

источник

2016-08-12 15:05:00

Ничего не изменилось. –

В вашей голове тега нужно добавить метатэга

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без установки вида просмотра ни один из ваших отзывчивых css не будет запущен.

У вас также есть свои divs внутри тега заголовка. Divs должен находиться внутри тега тела.

источник

2016-08-12 15:20:11 PatrickKelly

Да, у меня есть те теги, но я удалил их, потому что моя демонстрация была слишком длинной. –

Какую версию бутстрапа вы используете? – PatrickKelly

Может быть, вы должны глубоко погрузиться в документации

http://getbootstrap.com/css/#forms

Я думаю, что вы ищете для некоторых из начальной загрузки классов говорят .form-control .form-group ..etc

Также есть класс class = "содержать" вместо этого используют class="container" или class="container-fluid"

источник

2016-08-12 15:23:10

Форма бутстрапа не реагирует

ответ

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