Флажок Bootstrap не совпадает с ярлыком, еще хуже на мобильном - PullRequest
Новая
       10

Флажок Bootstrap не совпадает с ярлыком, еще хуже на мобильном

0 голосов
/ 03 февраля 2019

Я не могу получить контрольную метку, чтобы выстроить флажок ввода.Это еще хуже на мобильном телефоне.Я хочу, чтобы текст выстроился в линию.Что я делаю неправильно?Я думал, что div отсутствует или что-то, но он отлично работает с любым другим входом.Я попытался отрегулировать поля с помощью CSS, но теперь тоже работает.Любая помощь будет оценена.Вот код: 

   
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <!DOCTYPE html>
        <html lang="en">
          <head>
          
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
           <title>Login</title>
        
        
        <style>
        form .line {
            margin-bottom: 5px;
        }
        p{
           margin-top: 20px;
        }
        
        </style>
        
        
         <div class="container">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                  
        
                  <div class="panel panel-default">
          <div class="panel-body">
         <form class="form-horizontal">
        <fieldset>
        
        <!-- Form Name -->
        <legend>Login</legend>
        
        
        
        
        
        
        
        <!-- Text input-->
        <div class="form-group line">
          <label class="col-md-4 control-label" for="identity">Username</label>  
          <div class="col-md-4">
          <input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
            
          </div>
        </div>
        
        <!-- Password input-->
        <div class="form-group line">
          <label class="col-md-4 control-label" for="password">Password</label>
          <div class="col-md-4">
            <input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md">
            
          </div>
        </div>
        
        <!-- Multiple Checkboxes (inline) -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="remember">Remember Me</label>
          <div class="col-md-4">
            <label class="checkbox-inline" for="remember">
              <input type="checkbox" name="remember" id="remember" value="1">
              
            </label>
          </div>
        </div>
        
        <!-- Button -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="submit"></label>
          <div class="col-md-4">
            <button id="submit" name="submit" class="btn btn-primary">Login</button>
            <p><a href="forgot_password"><!--?php echo lang('login_forgot_password');?--></a></p>
          </div>
        </div>
        
        </fieldset>
        </form>
        </div>
        
        
        
        </div>
        
                </div>
               
        
             </div>
                <div class="col-md-2"></div></div>


            <div id="push"></div>

1 Ответ

0 голосов
/ 04 февраля 2019

Вы можете добавить некоторые стили CSS для управления положением .checkbox-inline

. Медиа-запрос переместит флажок для небольших экранов.

Также обратите внимание, что я добавил класс .form-small вваш последний .form-group для управления положением флажка на меньших экранах. 

.checkbox-inline {
  top: -7px;
}

@media only screen and (max-width: 991px) {
  .checkbox-inline {
    top: -40px;
    right: -115px;
  }
  .form-small {
    margin-bottom: 0 !important;
    max-height: 20px;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <!DOCTYPE html>
        <html lang="en">
          <head>
          
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
           <title>Login</title>
        
        
        <style>
        form .line {
            margin-bottom: 5px;
        }
        p{
           margin-top: 20px;
        }
        
        </style>
        
        
         <div class="container">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                  
        
                  <div class="panel panel-default">
          <div class="panel-body">
         <form class="form-horizontal">
        <fieldset>
        
        <!-- Form Name -->
        <legend>Login</legend>
        
        
        
        
        
        
        
        <!-- Text input-->
        <div class="form-group line">
          <label class="col-md-4 control-label" for="identity">Username</label>  
          <div class="col-md-4">
          <input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
            
          </div>
        </div>
        
        <!-- Password input-->
        <div class="form-group line">
          <label class="col-md-4 control-label" for="password">Password</label>
          <div class="col-md-4">
            <input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md">
            
          </div>
        </div>
        
        <!-- Multiple Checkboxes (inline) -->
        <div class="form-group form-small">
          <label class="col-md-4 control-label" for="remember">Remember Me</label>
          <div class="col-md-4">
            <label class="checkbox-inline" for="remember">
              <input type="checkbox" name="remember" id="remember" value="1">
              
            </label>
          </div>
        </div>
        
        <!-- Button -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="submit"></label>
          <div class="col-md-4">
            <button id="submit" name="submit" class="btn btn-primary">Login</button>
            <p><a href="forgot_password"><!--?php echo lang('login_forgot_password');?--></a></p>
          </div>
        </div>
        
        </fieldset>
        </form>
        </div>
        
        
        
        </div>
        
                </div>
               
        
             </div>
                <div class="col-md-2"></div></div>


            <div id="push"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...