Как выровнять метки нескольких полей ввода по вертикали? - PullRequest
Новая
       27

Как выровнять метки нескольких полей ввода по вертикали?

0 голосов
/ 16 апреля 2019

У меня есть два поля ввода для пользователя, а именно username и password. Вот как это выглядит

enter image description here

Вот код ниже для того же 

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="control-label col-sm-2" for="email">Email:</label>
          <div class="col-sm-3">
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="pwd">Password:</label>
          <div class="col-sm-3">          
            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
          </div>
        </div>
      </form>
    </div>
    
    </body>
    </html>

Теперь я хочу, чтобы Email и Password были выровнены вертикально так же, как поля ввода выровнены.

Я читал о form-control-static, но не вижу здесь эффекта. Я пытался использовать его для классов Email и Password что-то вроде 

<label class="control-label col-sm-2 form-control-static" for="pwd">Password:</label>

Но я не вижу никаких изменений. Что я делаю не так?

Примечание: Я использую Bootstrap 3

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Приведенный выше стиль исходит только из Bootstrap 3, «Text-align: right» 

@media (min-width: 768px)
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

Если вы хотите выровнять метки по левому краю, переопределите указанное выше свойство в своем коде следующим образом: 

@media (min-width: 768px)
    .form-horizontal .control-label {
        text-align: left;
    }
1 голос
/ 16 апреля 2019

Ваш код работает должным образом ..., попробуйте проверить, если вы внесли какие-либо изменения в css ... 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <form class="form-horizontal">
    <div class="form-group">
      <label class=" col-sm-2 col-xs-3" for="email">Email:</label>
      <div class="col-sm-3 col-xs-3">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class=" col-sm-2 col-xs-3" for="pwd">Password:</label>
      <div class="col-sm-3 col-xs-3">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
  </form>
</div>
ОБНОВИТЬ класс меток элемента управления по умолчанию выравнивает элементы вправо на больших экранах ... чтобы решить это, вы можете удалить его .. или использовать классы начальной загрузки ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...