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

您使用的是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>

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>

Answer 3

尝试使用col-md-12 col-12 mb-20类从父div移除.row类。这是因为根据 Bootstrap's documentation ，当嵌套列时，任何列.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>

单击折叠按钮时出现问题

3 个答案: