问题描述:

I have this grid order:

 <div class="row">

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 col-xxs col-xs-pull-0">

<div class="form-group">

<label>Username ID</label>

<input type="text" class="form-control" name="username_id" />

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 col-xxs">

<label>Full Name</label>

<input type="text" class="form-control" name="full_name" />

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 col-xxs">

<label>Member Status</label>

<input type="text" class="form-control" name="member_status" />

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 col-xxs">

<div class="form-group">

<label>Phone Number</label>

<input type="text" class="form-control" name="phone_number_mobile" />

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 col-xxs">

<label>Address / State</label>

<input type="text" class="form-control" name="address_city_state" />

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 col-xxs">

<label>Registered Date</label>

<input type="text" class="form-control" name="dt_added" />

</div>

</div>

There was no problem of grid arrangement for md or lg but for sm... the result goes like these:

JS Fiddle:

https://jsfiddle.net/6bwmbL5y/

How I can rearrange back in balance? Any advice would be appreciate. Thanks!

网友答案:

You had a slight mismatch of form-group elements. I've tidied them up and simplified the col-* classes too:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="form-group col-xs-6 col-md-3">
      <label>Username ID</label>
      <input type="text" class="form-control" name="username_id" />
    </div>
    <div class="form-group col-xs-6 col-md-3">
      <label>Full Name</label>
      <input type="text" class="form-control" name="full_name" />
    </div>
    <div class="form-group col-xs-6 col-md-3">
      <label>Member Status</label>
      <input type="text" class="form-control" name="member_status" />
    </div>
    <div class="form-group col-xs-6 col-md-3">
      <label>Phone Number</label>
      <input type="text" class="form-control" name="phone_number_mobile" />
    </div>
    <div class="form-group col-xs-6 col-md-3">
      <label>Address / State</label>
      <input type="text" class="form-control" name="address_city_state" />
    </div>
    <div class="form-group col-xs-6 col-md-3">
      <label>Registered Date</label>
      <input type="text" class="form-control" name="dt_added" />
    </div>
  </div>
</div>
相关阅读:
Top