Проблемы с созданием Bootstrap 3 для мобильных телефонов

Question

Я создаю персональный сайт, используя Twitter Bootstrap 3.4.3 для интерфейса и Python/Django 1.5.4 для бэкэнд. В настоящее время у меня много проблем, пытаясь привести сайт в более удобный для мобильных устройств режим. Я использую шаблоны обложки и блога для своего сайта. Образец обложки - это тот, который находится проблематичный.

Вот фрагмент главной страницы моего сайта на laptop-

А вот как это выглядит на моем смартфоне -

Вот что контактная страница выглядит как на моем ноутбуке -

А вот как это выглядит на моем смартфоне -

Как вы можете видеть в мобильной версии, фон не окружающие все элементы и изображения и текстовые поля установлены неправильно.

Я использую стандартный файл обложки Twitter Bootstrap для всех стилей главной страницы и страницы контактов. Вот несколько примеров кода я использую для основного корпуса -

html, 
body { 
height: 100%; 
width: 100%; 
background: url("../background-2.jpg") center no-repeat; 
background-size:cover; 
} 

Как я могу изменить стиль, чтобы сделать мой сайт для мобильных устройств?

Answer 1

классы Вы применяете к форме то, что будет иметь значение до любого пользовательского CSS: .form-control. Bootstrap 3 Forms

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form id="email_form" method="POST" action="/home/contact/"> 
 
    <div class="row"> 
 
     <input type='hidden' name='csrfmiddlewaretoken' value='uusHSjnOjeCLfyaCwmUC3eKH3EXIH9iX' /> 
 
     <div class="col-md-6"> 
 
     <div class="form-group"> 
 
      <input id="id_name" maxlength="200" name="name" placeholder="Name" type="text" class="form-control" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="form-group"> 
 
      <input id="id_email" name="email" placeholder="E-mail" type="text" class="form-control" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <input id="id_subject" maxlength="100" name="subject" placeholder="Subject" type="text" class="form-control" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <textarea cols="40" id="id_message" name="message" placeholder="Message" rows="10" class="form-control"></textarea> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <button class="btn btn-primary" type="submit" name="send">Send</button> 
 
    </form> 
 
</div>

У вас есть две различные таблицы стилей, которые фактически идентичны другой, то эти правила (вы действительно нужно только один файл между этими двумя):

cover.css имеет этот rule и mobile.css отсутствует высота и ширина, что, вероятно, вызывает проблемы с фоном.

html, body { 
    height: 100%; 
    width: 100%; 
    background: url("http://www.raghavkumar.work/static/background-2.jpg") center no-repeat; 
    background-size:cover; 
} 

mobile.css имеет это правило, которое cover.css не делает.

.img-responsive { 
display: block; 
height: auto; 
max-width: 100%; 
} 

Кроме того, у обеих есть эта ошибка: дно ошибочно написано. padding-bottom

.helptext { 
    padding-bottm: 2px; 
    font-size: 15px; 
}