html - 如何使用 css 和 bootstrap 修复表单字段对齐问题

Question

我已经使用 bootstrap 创建了一个表单。当它显示错误时，错误下方的 div block 向右移动。如何使用 CSS 解决这个问题？

这是显示错误后的截图:

代码

https://jsfiddle.net/yzm2aj9j/#&togetherjs=Q8Bk7CaMjy

<form>
  <div class="col-xs-6 col-md-6">
    <div class="form-group ">
      <label for="username" class="col-md-6 control-label">User Name</label>
      <div class="col-md-6">
        <input type="text" class="form-control" id="username" placeholder="User Name">
      </div>
      <div class="col-xs-12" style="color:#ff5555;">
        <span class="error">User Name Cannot Be Blank</span>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-6">
    <div class="form-group ">
      <label for="inputEmail" class="col-md-6 control-label">Email</label>
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-6">
    <div class="form-group ">
      <label for="phone" class="col-md-6 control-label">Phone</label>
      <div class="col-md-6">
        <input type="text" class="form-control" id="phone" placeholder="phone">
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-6">
    <div class="form-group ">
      <label for="inputEmail" class="col-md-6 control-label">Email</label>
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-6">
    <div class="form-group ">
      <label for="inputEmail" class="col-md-6 control-label">Email</label>
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-6">
    <div class="form-group ">
      <label for="inputEmail" class="col-md-6 control-label">Email</label>
      <div class="col-md-6">
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
      </div>
    </div>
  </div>
</form>

Answer 1

根据 Bootstrap's Documentation :

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

If default grids are being used then rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

您需要将两个 .col-xs-6 包裹在一个 .row 中。你的代码结构应该是这样的:

<div class="row">
    <div class="col-xs-6">
        // column content goes here...
    </div>
    <div class="col-xs-6">
        // column content goes here...
    </div>
</div>
<div class="row">
    <div class="col-xs-6">
        // column content goes here...
    </div>
    <div class="col-xs-6">
        // column content goes here...
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="row">
    <div class="col-xs-6 col-md-6">
      <div class="form-group ">
        <label for="username" class="col-md-6 control-label">User Name</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="username" placeholder="User Name">
        </div>
        <div class="col-xs-12" style="color:#ff5555;">
          <span class="error">User Name Cannot Be Blank</span>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-md-6">
      <div class="form-group ">
        <label for="inputEmail" class="col-md-6 control-label">Email</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-md-6">
      <div class="form-group ">
        <label for="phone" class="col-md-6 control-label">Phone</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="phone" placeholder="phone">
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-md-6">
      <div class="form-group ">
        <label for="inputEmail" class="col-md-6 control-label">Email</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-md-6">
      <div class="form-group ">
        <label for="inputEmail" class="col-md-6 control-label">Email</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-md-6">
      <div class="form-group ">
        <label for="inputEmail" class="col-md-6 control-label">Email</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
  </div>
</form>