Как сделать ввод строки в одну и ту же строку вертикально со входами следующей строки?

Question

Я делаю регистрационную форму участника, и я хочу сделать или установить ввод строки в той же строке вертикально со входами следующей строки.Я сделал отображение: flex div и поместил в него входы, которые я хочу, чтобы они были встроены, но я не мог установить их на одной и той же строке вертикально со входами следующей строки.

Я пытаюсь получитьэто нравится https://i.ibb.co/SscFZvw/reg.png

<link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
<link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />

<div class="container">
  <div class="row">
    <div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
      <div class="panel panel-default">
        <div class="panel-heading">Member Registration</div>
        <br>
        <form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">

          <div style="display:flex;">
            <div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Membership Date</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Membership No.</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
              </div>
            </div>
          </div>

          <div style="display:flex;">
            <div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Member Name</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Father Name</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Mother Name</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
              </div>
            </div>
          </div>

          <div style="display:flex;">
            <div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Birth Date</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Birth Place</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Gender</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

Это отличный пример использования CSS-сетки, если вам не требуется поддержка IE11 (вы все еще можете использовать сетку с IE10 +, но это просто больше работы). См. Ниже, если вы удалите свои flex-контейнеры, а затем просто превратите свою форму в контейнер с 3 столбцами, он будет работать как положено (см. Тег style в конце тела). Обратите внимание, что я добавил пустой местозаполнитель div для создания этого пробела в первой строке.

.form-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px
}

<head>
  <html>
    <link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
    <link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
    <link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />
  </head>
</html>
<body>     
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
        <div class="panel panel-default">
          <div class="panel-heading">Member Registration</div>
          <br>
          <form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">
  
            <!-- <div style="display:flex;"> -->
              <div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Membership Date</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Membership No.</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
                </div>
              </div>
              <!-- ADD EMPTY DIV PLACEHOLDER -->
              <div class="placeholder_item"></div>
            <!-- </div> -->
  
            <!-- <div style="display:flex;"> -->
              <div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Member Name</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Father Name</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Mother Name</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
                </div>
              </div>
            <!-- </div> -->
  
            <!-- <div style="display:flex;"> -->
              <div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Birth Date</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Birth Place</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Gender</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
                </div>
              </div>
            <!-- </div> -->
  
          </form>
        </div>
      </div>
    </div>
  </div>