问bootstrap3将div彼此相邻对齐
EN

Stack Overflow用户

提问于 2015-01-06 18:23:03

回答 1查看 176关注 0票数 0

我想创建一个具有用户名和密码的表单。这就是我想要实现的：

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

我的问题是在较大的设备上，当输入彼此相邻时，你会得到一条错误消息，密码会留在顶部(错误旁边)，而不会随着用户名输入而下降。

    <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 (单击登录查看)

css

html

twitter-bootstrap

twitter-bootstrap-3

跨境电商上云解决方案

轻量应用服务器助力卖家与独立站拓展跨境电商业务

回答 1

Stack Overflow用户

发布于 2015-01-12 09:35:42

在username div之前插入一个<br>元素怎么样，我想它会满足您的需求：

$('#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>