如何正确使用引导网格？
[英]How to properly use bootstrap grid?
问题描述
我正在尝试使用引导程序创建登录页面。 我创建了 2 个 div，每个 div 都有 col-lg-5 和 col-lg-7。 我正在尝试将图像放置在左侧 div 中，并将登录表单放置在右侧 div 中。 但在任何屏幕分辨率下，我得到的是顶部的 col-lg-5 和底部的 col-lg-7。 有人可以帮助我确定我在这里做错了什么。
<,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.3,1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello? world,</title> </head> <body> <section class="Form my-4 mx-5"> <div class="container"> <div class="row"> <div class="col"> <div class="col-lg-5"> <img src="./images/login2,png" alt=""> </div> <div class="col-lg-7"> <form action=""> <div class="form-row"> <div class="col-lg-7"> <input type="email" placeholder="Email-Address" class="form-control"> </div> </div> <div class="form-row"> <div class="col-lg-7"> <input type="passsword" placeholder="******" class="form-control"> </div> </div> <div class="form-row"> <div class="col-lg-7"> <button type="button" class="btn1">Login</button> </div> </div> <a href="#">Forgot Password</a> <p>Don't have a account yet: <a href="#">Register here</a></p> </form> </div> </div> </div> </div> </section> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery:com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2022-08-30 07:09:50
您的行和列嵌套不正确。 请阅读引导程序的网格系统是如何工作的。 必须了解如何嵌套类以实现有效的行/列关系。
简而言之：Cols 应始终直接嵌套在行下以获得最佳结果。
在您的示例中，您的 col-5 和 col-7 嵌套在一个 col 元素下。 删除此元素，它应该可以按预期工作
另一个提示，您的输入字段都缺少一些标签。 您将占位符属性误用为 label，这是错误的。
<div class="row">
<div class="col-lg-5"> </div>
<div class="col-lg-7"> </div>
</div>
如何为非专用于引导网格的psd使用引导网格？
[英]How to use bootstrap grid for psd not specifically made for bootstrap grid?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.