bootstrap3将div彼此相邻对齐
bootstrap3将div彼此相邻对齐
提问于 2015-01-07 02:23:03
我想创建一个具有用户名和密码的表单。这就是我想要实现的：
在小型设备上，我希望输入一个在另一个之上，在较大的设备上，我希望输入彼此相邻。
我的问题是在较大的设备上，当输入彼此相邻时，你会得到一条错误消息，密码会留在顶部(错误旁边)，而不会随着用户名输入而下降。
<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 (单击登录查看)
回答 1
Stack Overflow用户
发布于 2015-01-12 17: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>
用户或者只是将
和password元素放在
<p>元素中。
在您的代码中尝试它，因为代码片段不显示引导CSS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27804743
复制相关文章
相似问题
腾讯云开发者
