Как выровнять текстовое поле по вертикали по его метке и кнопке - PullRequest
Новая
       33

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

1 голос
/ 18 июня 2019

Я в основном пытаюсь использовать этот вид макета:

Метка TextField Button

Так, например: Количество копий [5] [Добавить]

Мысль, чтобыло бы действительно просто сделать.Но я боролся уже несколько часов, и это самое близкое, что я приехал, что абсолютно ужасно: Bad attempt

Вот мой код: 

<div class="row col-md-12">
            <form class="form-inline pull-right">
                <div class="form-group">
                    <label for="numberOfCopies">Number of copies</label>
                    <input size="1" type="text" class="form-control" id="numberOfCopies">
                    <button type="submit"  class="btn btn-primary">Add</button>
                </div>
            </form>
        </div>

1 Ответ

1 голос
/ 18 июня 2019

Сначала некоторые основы Bootstrap:

  • ваш 'row-div' должен быть заключен в 'container-div'
  • row и col-xx-x классы, необходимыечтобы быть в их собственных тегах div

, как вы можете видеть на примере ниже, вы можете легко сделать это, используя css.

  • С display: flex; мы получаем все элементы группы формы рядом.
  • С помощью white-space: nowrap мы «сообщаем» метку, которая будет отображаться только в одну строку.
  • Используя теги margin, мы получим элементы в правильном положении.

Чтобы узнать больше, взгляните на документацию display , пробел и margin .

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

.form-group.flex {
  display: flex;
}

.form-group.flex label {
  white-space: nowrap;
  margin-top: 7px;
}

.form-group.flex input {
  margin: 0 7px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline pull-right">
        <div class="form-group flex">
          <label for="numberOfCopies">Number of copies</label>
          <input size="1" type="text" class="form-control" id="numberOfCopies">
          <button type="submit" class="btn btn-primary">Add</button>
        </div>
      </form>
    </div>
  </div>
</div>
...