У меня проблема при нажатии кнопки сворачивания

Question

У меня проблема. Вид выглядит так:

Когда я нажимаю кнопку, вид становится таким:

Проблема в том, что я хочу, чтобы вид был таким:

• город рядом с государством,
• страна рядом с почтовым индексом

Как это исправить? и что я должен сделать?

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
    <div class="col-md-6 mb-20">
        <label>City</label>
        <input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
        <?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>State</label>
        <input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
        <?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>Country</label>
        <input class="mb-0" type="text" name="country" value="Indonesia" readonly>
    </div>
    <div class="col-md-6 mb-20">
        <label>Zip Code</label>
        <input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
        <?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>Phone Number</label>
        <input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
        <?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>

    <input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>

    <div class="col-12">
        <button type="submit" name="register" class="register-button mt-0">Register</button>
    </div>
</div>

<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

Answer 1

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
    <div class="row">
      <div class="col-md-6 mb-20">
          <label>City</label>
          <input class="mb-0" type="text" name="city" placeholder="City" value="">
      </div>
      <div class="col-md-6 mb-20">
        <label>State</label>
        <input class="mb-0" type="text" name="province" placeholder="State" value="">
    </div>
</div>
<div class="row">
    <div class="col-md-6 mb-20">
        <label>Country</label>
        <input class="mb-0" type="text" name="country" value="Indonesia" readonly>
    </div>
    <div class="col-md-6 mb-20">
        <label>Zip Code</label>
        <input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="">
    </div>
</div>
<div class="row">
    <div class="col-md-6 mb-20">
        <label>Phone Number</label>
        <input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="">
    </div>
</div>
<input class="mb-0" type="text" name="date_created" value="" hidden>
<div class="col-12">
    <button type="submit" name="register" class="register-button mt-0">Register</button>
</div>

Подробнее ...

Answer 2

Попробуйте удалить col-md-12 col-12 mb-20 class из родительского div с помощью .row class.Это связано с тем, что согласно документации Bootstrap при вложении столбцов любые столбцы .col должны быть вложены в .row. Два не должны быть объединены на одном элементе.

<div class="row collapse" id="registerform">
    <div class="col-md-6 mb-20">
        <label>City</label>
        <input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
        <?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>State</label>
        <input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
        <?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>Country</label>
        <input class="mb-0" type="text" name="country" value="Indonesia" readonly>
    </div>
    <div class="col-md-6 mb-20">
        <label>Zip Code</label>
        <input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
        <?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>Phone Number</label>
        <input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
        <?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>

    <input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>

    <div class="col-12">
        <button type="submit" name="register" class="register-button mt-0">Register</button>
    </div>
</div>

<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

Answer 3

Вы используете col-md-6, поэтому я думаю, что вы должны получить желаемый результат в больших окнах просмотра.Вы можете использовать col-6, который должен работать даже в маленьких окнах просмотра:

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform" >
  <div class="row  mb-20">
    <div class="col-6">
      <label>City</label>
      <input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
      <?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>                                  
    <div class="col-6">
      <label>State</label>
      <input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
      <?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
  </div>
  <div class="row mb-20">
    <div class="col-6">
      <label>Country</label>
      <input class="mb-0" type="text" name="country" value="Indonesia" readonly>
    </div>                      
    <div class="col-6">
      <label>Zip Code</label>
      <input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
      <?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
  </div>
  <div class="col-md-6 mb-20">
    <label>Phone Number</label>
    <input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
    <?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
  </div>

  <input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>

  <div class="col-12">
    <button type="submit" name="register" class="register-button mt-0">Register</button>
  </div>
</div>

<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>