bootstrap3将div彼此相邻

I want to create a form with username and password. this is what i'm trying to achieve: bootstrap3将div彼此相邻

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

on small devices i want the inputs to be one above the other, on larger devices to be next to each other.

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

my problem is on the larger devices, when the inputs are next to each other and you get an error message, the password stays on the top (next to the error) and not goes down with the username input.

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

    <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 (click on login to see)

我的例子(点击登录查看)

1 个解决方案

#1

How about just inserting a <br> element before the username div, I think it will give you what you want:

如何在用户名div之前插入一个
元素,我想它会给你你想要的东西:

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

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

Or just put the user and the password elements inside a <p> element.

或者只是将用户和密码元素放在

元素中。

Try it in your code, because the snippet doesn't show bootstrap CSS.

在您的代码中尝试它,因为该代码段不显示引导CSS。

#1