0

введите сюда описание изображения В классе div я выбераю form-inline. Что бы содержимое дивов было в строчку. В итоге все улетает. Нужно что -бы имя фамилия была вряд.

<div class="modal-body">
            <form class="form">
                <div class="form-group">
                    <label  class="col-form-label">Имя</label>
                    <input type="text" class="form-control" id="firstName">
                </div>
                <div class="form-group">
                    <label class="col-form-label">Фамилия</label>
                    <input type="text" class="form-control" id="middleName">
                </div>
  </div>
4
  • 1
    <form class="form-inline"><div class="form-group mb-2">
    – Bert
    10 июл 2018 в 7:06
  • в каком смысле улетает? куда улетает?
    – Bert
    10 июл 2018 в 7:08
  • тег form не закрыт
    – soledar10
    10 июл 2018 в 7:18
  • ААА мои глаза! ЭМАЙЛ!!! ЭМАЙЛ!!!!! Развидьте мне это...
    – Developer
    10 июл 2018 в 8:07

3 ответа 3

1

Вам нужно объединить инпуты в один <div class='form-group'>:

<div class="modal-body">
    <form class="form">
        <div class="form-group">
            <label  class="col-form-label">Имя</label>
            <input type="text" class="form-control" id="firstName">
            <label class="col-form-label">Фамилия</label>
            <input type="text" class="form-control" id="middleName">
        </div>
    </form>
</div>

1

Как я понял похоже, что вам надо так -

[ссылка на кодепен] https://codepen.io/uyuri/pen/OwJNOd

Все дело в бутстрапе и ваш html лучше разместить типа на кодепен чтобы было наглядно. в бутстрапе col- это колонка сетки. а для инлайновых свойств нужно класс типа form-inline. Если объединить в один общий див но оставить бутстраповое col- все равно будет разбиение на две строки

https://codepen.io/uyuri/pen/OwJNOd

1
  • @Anamnian ваш код работает на этой странице, но в кодепен - нет. разбивает на 2 блока
    – Yurij
    10 июл 2018 в 8:59
0
 <div class="form-row">
       <div class="form-group col-md-6">
          <label for="inputEmail4">Имя</label>
          <input type="email" class="form-control" placeholder="Email">
  </div>

  <div class="form-group col-md-6">
    <label for="inputPassword4">Password</label>
    <input type="password" class="form-control"Фамилия">
   </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.