bootstrap3将div彼此相邻

Question

我想创建一个包含用户名和密码的表单。 这就是我想要实现的目标：

在小型设备上我希望输入一个在另一个之上，在较大的设备上彼此相邻。

我的问题是在较大的设备上，当输入彼此相邻并且您收到错误消息时，密码保持在顶部（错误旁边）而不是用用户名输入下降。

    <div class="row">
      <div class="row col-sm-3">
       <div class="username_input_error error_2_columns_right">
         <div id="username_error_placeholder" class="frm_login_errors error_msg" style="display: none">
        missing username
      </div>
    </div>
    <div class="input_2_columns_left username_input">
      <input id="username" type="text" name="usernme" placeholder="Username" class="utility_bar_inputs panel_inputs" alt="Enter username">
    </div>
  </div>
  <div class="col-xs-12 visible-xs">
    <div class="utility-bar-vertical-spacer"></div>
  </div>
  <div class="row col-sm-3">
    <div class=" username_input_error error_2_columns_left">
      <div id="password_error_placeholder" class="frm_login_errors error_msg" style="display: none;">missing password</div>
    </div>
    <div class="input_2_columns_right password_input">
      <input type="password" id="password" name="password" placeholder="Password" class="utility_bar_inputs panel_inputs" alt="enter password">
    </div>
  </div>

</div>
 <div class="col-xs-12">
    <button id="perform_login" type="button" class="panel_button perform_login" alt="log in">LOG IN</button>
  </div>

<script>
  $('#perform_login').on('click', function (event) {
    $('#username_error_placeholder').show();
  });
</script>

My example（点击登录查看）

Answer 1

如果只在<br>之前插入username div元素，我认为它会为您提供所需内容：

＆＃13;

＆＃13;

$('#perform_login').on('click', function (event) {
  $('#username_error_placeholder').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="row">
  <div class="row col-sm-3">
    <div class="username_input_error error_2_columns_right">
      <div id="username_error_placeholder" class="frm_login_errors error_msg" style="display: none">
        missing username
      </div>
    </div>
    <br>
    <div class="input_2_columns_left username_input">
      <input id="username" type="text" name="usernme" placeholder="Username" class="utility_bar_inputs panel_inputs" alt="Enter username">
    </div>
  </div>
  <div class="col-xs-12 visible-xs">
    <div class="utility-bar-vertical-spacer"></div>
  </div>
  <div class="row col-sm-3">
    <div class=" username_input_error error_2_columns_left">
      <div id="password_error_placeholder" class="frm_login_errors error_msg" style="display: none;">missing password</div>
    </div>
    <div class="input_2_columns_right password_input">
      <input type="password" id="password" name="password" placeholder="Password" class="utility_bar_inputs panel_inputs" alt="enter password">
    </div>
  </div>
 
</div>
 <div class="col-xs-12">
    <button id="perform_login" type="button" class="panel_button perform_login" alt="log in">LOG IN</button>
  </div>

＆＃13;

＆＃13;

＆＃13;

  

或者只是将用户和密码元素放在<p>元素中。

在您的代码中尝试一下，因为该代码段不显示引导CSS。