单击折叠按钮时出现问题

Question

I have a problem. The view is like this :

When I click button see more the view is like this :

The problem is, I want the view is like this :

• city beside state,
• country beside zip code

How to fix this ? and what should I have to do ?

<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

You're using col-md-6 so I think you should actually get the result you want in larger viewports. You could use col-6 which should work even in small viewports:

<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>

Answer 2

<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>

See more...

Answer 3

Try removing col-md-12 col-12 mb-20 class from the parent div with .row class. This is because according to Bootstrap's documentation when nesting columns any columns .col should be nested within a .row . The two should not be combined on a single element.

<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>