текст в горизонтальной форме не выравнивается по вертикали - PullRequest
Новая
       8

текст в горизонтальной форме не выравнивается по вертикали

0 голосов
/ 17 января 2019

У меня очень простая горизонтальная форма Bootstrap 3 со строкой из 3 столбцов
Столбец 1 является меткой, ссылающейся на column2
Колонка 2 - это текстовое поле ввода
Колонка 3 - это описательный текст

Столбец 1 выровнен по вертикали с текстовым полем column2, но column3 кажется выше, чем другой. What i get

¿Что я делаю не так? 

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form class="form-horizontal" name="frmBuscar" id="frmBuscar" method="post">
<div class="form-group">
<label class="control-label col-lg-6" for="txt1">Campo 1:</label>
<div class="col-lg-3">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="col-lg-3 ">
Unidad 1
</div>
</div>
</form>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Изменить это 

<div class="col-lg-3">
       Unidad 1 
</div>

К 

<div class="control-label  col-lg-1">
       Unidad 1
</div>
0 голосов
/ 17 января 2019

Я не думаю, что использование столбцов обязательно лучший способ пойти с этим; вы можете использовать display: flex для контейнера .form-group и просто выровнять все по концу контейнера; также вам нужно убрать поле для label и все.

Кроме того, по какой-то причине я не смог посмотреть на вашу картинку только с предоставленным вами HTML-кодом, но я работаю почти так же, как и с CSS-кодом. Вторая форма - ваша разметка 

.form-group {
  display: flex;
  align-items: flex-end;
}

label {
  margin-bottom: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form class="" name="frm" id="frm">
  <div class="form-group">
    <label class="" for="txt1">
              Campo 1:
         </label>
    <div class="">
      <input name="txt1" id="txt1" value="100" class="form-control">
    </div>
    <div class="">
      Unidad 1
    </div>
  </div>
</form>


<form class="form-horizontal" name="frm" id="frm">
  <div class="form-group">
    <label class="control-label col-lg-6" for="txt1">
              Campo 1:
         </label>
    <div class="col-lg-3">
      <input name="txt1" id="txt1" value="100" class="form-control">
    </div>
    <div class="col-lg-3">
      Unidad 1
    </div>
  </div>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...